Réaliser un scheduler AJAX avec jQuery et PeriodicalUpdater

Posté par seiyar81 le 21 mai 2013 | Laisser un commentaire (0)
jQuery

jQuery est un outil formidable.
Il fait non seulement partie des meilleurs frameworks du moment, je dis bien des car nombreux sont ceux qui rivalisent en terme de fonctionnalités, légèreté, et simplicité d’utilisation : ExtJS, Prototype, Mootools ou encore YUI pour ne pas les citer.

Mais sa véritable force, comme j’ai déjà pu l’évoquer avec le génial DataTables, réside dans la variété de plugins disponibles.

Nous nous intéressons ici à un plugin, qui est en fait un portage d’une fonctionnalité de Prototype vers jQuery, j’ai nommé PeriodicalUpdater.

Petit exemple concret : qui n’a jamais eu à mettre en place un rafraîchissement automatique du contenu d’une page Web à base de setInterval ? C’est fastidieux, pas pratique à écrire et s’écarte un peu de la logique d’utilisation d’un framework.

PeriodicalUpdater nous permet via une méthode unique de mettre en place une requête AJAX périodique, facilement paramétrable.

Rien de tel qu’un peu de code pour tout comprendre, la méthode prend trois paramètres : l’URL à interroger, les paramètres de la requête, une fonction callback.

Les paramètres ne sont ni plus ni moins que les paramètres normalement passés à une requête $.ajax classique avec en plus ceux de PeriodicalUpdater.

$('#myDiv').PeriodicalUpdater('/news/list/', 
{
        method: 'get',          // méthode; get ou post
        data: {},               // tableau de valeurs passées à l'URL - e.g. {nom: "Yriase", msg: "Hello World"}
        minTimeout: 1000,       // valeur de départ du timeout en millisecondes
        maxTimeout: 8000,       // valeur maximum du timeout en millisecondes
        multiplier: 2,          // valeur pour incrémenter le timeout si la réponse n'a pas changé (jusqu'à maxTimeout)
        type: 'text',           // type de la réponse : text, xml, json, etc.  Voir $.ajax
        maxCalls: 0,            // nombre maximum d'appels. 0 = pas de limite.
        autoStop: 0,            // arrête automatiquement la requête après plusieurs retours renvoyant les mêmes données. 0 = désactivé.
        autoStopCallback: function() { ... } // Callback a exécuter quand l'autoStop est déclenché
        cookie: {},             // configuration du cookie pour stocker le timeout
        verbose: 0              // niveau de verbosité des logs : 0=aucuns, 1=moyen, 2=tout 
}
, function(remoteData, success, xhr, handle) { 
    // this référence $('#myDiv') 
});

Il est également possible d’appeler librement la méthode sans l’attacher à un élément :

$.PeriodicalUpdater('/news/list/', {}, function(remoteData, success, xhr, handle) {});

Et voilà en quelques lignes vous avez paramétré votre scheduler ;)

Pour récupérer le plugin direction GitHub.

Catégorie: Développement Web, Internet, Javascript | Laisser un commentaire (0)

Qt : Sauvegarder et récupérer une image dans une base de données

Posté par seiyar81 le 3 avril 2013 | Laisser un commentaire (0)

Tous les SGBD, qu’il s’agisse de bases SQL ou NoSQL, permettent de stocker des données au format binaire.

Pour les principaux : MySQL, MariaDB possèdent les types BLOB, BINARY ou VARBINARY, SQLite offre aussi un type BLOB, PostgreSQL un type BYTEA.

Il peut être utile ou nécessaire de pouvoir stocker/charger une QImage dans une base de données.

Pour la sauvegarder :


    // On ouvre la connexion à la base de données
    QSqlDatabase db = QSqlDatabase::addDatabase("QPSQL", "mybase");
    db.setHostName("localhost");
    db.setDatabaseName("mybase");
    db.setUserName("root");
    db.setPassword("");
    db.setPort(5432);

    db.open();

    QImage image("mon_image.png");
    QByteArray byteArray;
    QBuffer buffer(&byteArray);
    image.save(&buffer, "PNG");

    QSqlQuery query(db);
    query.prepare("INSERT INTO image (data) VALUES (:data)");
    query.bindValue(":data", byteArray, QSql::Binary);
    query.exec();

Pour la charger :


    QSqlQuery query(db);
    query.prepare("SELECT * FROM image WHERE id = :id");
    query.bindValue(":id", 42);

    q.exec();

    QImage image;
    QByteArray byteArray = query.value(1).toByteArray();
    QBuffer buffer(&byteArray);
    image.load(&buffer, "PNG");

Catégorie: Qt | Laisser un commentaire (0)

PHPUi : Du nouveau et des examples

Posté par seiyar81 le 26 février 2013 | Laisser un commentaire (0)

PHPUi Logo

Beaucoup de changements pour PHPUi, on avance petit à petit vers une librairie utilisable pour développer et créer ses interfaces utilisateurs.

La réécriture de la librairie avec les namespaces de PHP5 a apporté entre autres une meilleur abstraction et modularité des fonctionnalités.

Le support de jQuery ( et de jQuery Ui ) est toujours d’actualité mais est complété par le support de Javascript basique.
Cela nous permet de mieux intégrer dans nos pages des fonctionnalités simples mais nécessaires telles que l’ouverture de popup ou le clic sur un bouton sans avoir besoin d’un framework complet.

Un petit exemple :

	$button = new Xhtml\Element('button', array('onClick' => PHPUi::getInstance()->js()->console->log('[OnClick] Hello world !')), true, 'Click me !');
	$button->onMouseOver = $button->js()->console->log('[MouseOver] Hello world !');
	echo $button;

        $button2 = new Xhtml\Element('button', array('onClick' => PHPUi::getInstance()->js()->window->open("http://localhost/phpui/examples/","PHPUi Examples","menubar=1,resizable=1,width=350,height=250")), true, 'Open pop-up !');
        echo $button2;

Comme vous pouvez le voir, le chaînage des appels Javascript est pleinement supporté.

Cette fonctionnalité devrait également faire son apparition dans l’adapter jQuery en plus du support des spécificités de ce dernier.
A l’heure actuelle vous pouvez déjà réaliser ceci :

        $gs = PHPUi::getInstance()->gs(array('columns' => 16));
        $gs->addChild(new Xhtml\Element('h2', null, true, '16 Column Grid - 960Gs'));
        $gs->jquery()->click( $gs->js()->console->log("Hello from the console") ); 
        $gs->jquery()->click( 
            $gs->jquery()->ajax( 
                array( 
                    'url' => 'ajax.php', 
                    'type' => 'POST', 
                    'data' => array( 'html' => $jsonString ), 
                    'dataType' => 'html',
                    'success' => 'function(data) { $(".container_16").append(data); }' 
                ) 
            ) 
        );
        echo $gs;

Le chaînage des appels Javascript dans un appel jQuery est actuellement supporté.

Pour plus d’exemples ou d’informations voyez le GitHub du projet.

Catégorie: Développement Web, Javascript, PHP | Laisser un commentaire (0)

Qt : Convertir une QImage en noir & blanc

Posté par seiyar81 le 27 décembre 2012 | Laisser un commentaire (0)

Qt, actuellement en version 4.8 et 5.0 RC2, possède un certain nombre de fonctionnalités propre aux graphismes et au dessin.
Notamment une bonne gestion des différents formats d’images comme vous pouvez le voir dans le tableau suivant :

Format Description Support de Qt
BMP Windows Bitmap Read/write
GIF Graphic Interchange Format (optional) Read
JPG Joint Photographic Experts Group Read/write
JPEG Joint Photographic Experts Group Read/write
PNG Portable Network Graphics Read/write
PBM Portable Bitmap Read
PGM Portable Graymap Read
PPM Portable Pixmap Read/write
TIFF Tagged Image File Format Read/write
XBM X11 Bitmap Read/write
XPM X11 Pixmap Read/write

S’il est possible de base de manipuler les images en changeant le mode RVB, en modifiant les pixels ou les couleurs, il faut passer par une manipulation manuelle pour convertir une image en niveaux de gris.
Pour cela rien de plus simple que la fonction suivante :

void toGrayscale(QImage & image)
{
    Q_ASSERT(!image.isNull());
    Q_ASSERT(image.width() > 0 && image.height() > 0);

    QRgb col;
    int gray;
    int width = image.width();
    int height = image.height();
    QImage alpha = image.alphaChannel(); // On sauvegarde le canal alpha pour la transparence
    for (int i = 0; i < width; ++i)
    {
        for (int j = 0; j < height; ++j)
        {
            col = image.pixel(i, j);
            gray = qGray(col);
            image.setPixel(i, j, qRgb(gray, gray, gray));
        }
    }
    image.setAlphaChannel(alpha);
}

L’opération n’est pas des plus légères puisqu’elle modifie un à un tous les pixels de l’image, toutefois elle fait ce qu’on lui demande.

Catégorie: Qt | Laisser un commentaire (0)

Giganews : Les plate-formes mobiles à l’honneur

Posté par seiyar81 le 13 décembre 2012 | Laisser un commentaire (0)


 

Depuis toujours les équipes de Giganews mettent un point à faire évoluer leurs services, avec pour seul but la satisfaction de leur utilisateurs.
C’est d’ailleurs en restant à l’écoute de ces derniers qu’ils ont amélioré la qualité des derniers nés de la famille Giganews : VyprVPN et DumpTruck.

 

Si les premières versions de la solution de VPN anonyme ont connu quelques bugs, il faut bien avouer que depuis on ne peut plus reprocher grand chose au service.
Le logiciel Windows permet en 3 clics de changer de connexion, pour rappel on au choix : Paris, Amsterdam, Londres, Francfort, Hong Kong, Austin, Los Angeles, Washington.

 

Mais depuis 2 semaines, les deux applications mobiles ont été mises à jour et offrent les mêmes fonctionnalités que la version Desktop, voire plus.
En effet, que ce soit pour la version iOS ou Android, vous êtes automatiquement connecté au VPN le plus proche de votre position.
On notera également sur iOS que l’application ne s’active que lorsque c’est nécessaire, autrement dit que s’il y a des données à chiffrer.
Les utilisateurs d’Android apprécieront eux de ne plus avoir à configurer la connexion à la main !

 

Ci-dessous un screenshot de l’application Android.

VyprVPN Android

Les utilisateurs de DumpTruck ne sont quand à eux pas en reste puisque non seulement les applications mobiles évoluent mais la version Web se voit complètement refondue, ainsi que les versions Desktop (Windows et Mac).

La nouvelle version Web de l’interface :

DumpTruck WebApp

Et la version Android, très épurée :

DumpTruck Android

 

Pour information, DumpTruck possède un Cloud assez sécurisé puisque la redondance des fichiers est assurée par 3 copies des fichiers chiffrées en AES 256 bits et toutes les données envoyées ou téléchargées le sont via une connexion SSL 256 bits.

 

Pour plus d’informations rendez-vous donc sur Giganews.com ou sur les autres pages : Youtube, Twitter, Google+ ou Facebook.

 

Catégorie: Geek, Internet, Newsgroup | Laisser un commentaire (0)

DataTables : Personnalisation du template

Posté par seiyar81 le 12 décembre 2012 | Laisser un commentaire (1)

Encore un article sur DataTables, et oui je dois bien me l’avouer, la librairie me plaît elle est très ouverte et flexible c’est donc tout normalement que je me permets de donner des petites astuces sur son utilisation.

Il existe une option de configuration que vous n’avez peut-être pas encore utilisée, car pas nécessairement configurable si on se sert de la version basique de DataTables, mais qui se révèle pourtant très utile.
Chaque tableau possède un header et un footer (balises <thead> et <tfoot>) qui servent à afficher un certain nombre de contrôles : pages, filtre etc …

Et bien le plugin nous offre la possibilité de pleinement configurer tout ça !
C’est donc via l’option de configuration sDom que l’on va choisir quoi afficher, et où.

Un petit exemple tout simple :

    $(document).ready(function() {
        $('#example').dataTable( {
            "sDom": '<"top"lp>rt<"bottom"if>'
        } );
    } );

Cette configuration inverse les contrôles par défaut, ceux du header se retrouvent dans le footer et vice-versa.

Mais plus intéressant cette option nous permet de rajouter des contrôles personnalisés. Imaginons que pour une raison particulière on ai besoin d’ajouter un filtre sur une colonne et que l’on ai envie de mettre ce filtre à la place du champ de recherche.

Rien de plus simple :

    

$(document).ready(function() {

        $.fn.dataTableExt.aoFeatures.push( {
                "fnInit": function( oSettings ) {
                    return $("<select id='filter'>...</select>").get(0); 
                }, 
                "cFeature": "S", 
                "sFeature": "Filtre" 
        } ); 

        $('#example').dataTable( { 
                     "sDom": '<"top"Si>rt<"bottom"lp>' 
              } 
        ); 

} );

Un petit coup de CSS et le tour est joué !

La prochaine fois je parlerai des options de filtrage, triage de DataTables.

Catégorie: Développement Web, Javascript | Laisser un commentaire (1)

PHPUi : créer et manipuler des interfaces utilisateurs en PHP

Posté par seiyar81 le 21 septembre 2012 | Laisser un commentaire (2)

PHPUi Logo

Je présente aujourd’hui un projet commencé pour mon mémoire de fin d’études, puis mis en pause, puis repris, puis complètement réécris …

Il s’agit d’une librairie qui permet de générer des interfaces utilisateurs en écrivant uniquement du PHP (ou presque :p).
Le but est de simplifier la vie aux développeurs qui souhaitent générer dynamiquement du code HTML/CSS ou Javascript côté serveur.
A l’heure actuelle, le support du CSS et du Javascript est en cours d’implémentation/optimisation.

La librairie se veut 100% objet PHP5, utilise les namespaces, est facilement extensible via une abstraction de la plupart de ses fonctionnalités, supporte l’autoload, utilise le pattern Observer etc …
De plus un support particulier des frameworks CSS 960gs et Blueprint a été implémenté (via le système d’abstraction, donc applicable à d’autres frameworks/librairies) afin de réellement faciliter la mise en place d’interfaces aux développeurs.

Si vous souhaitez plus d’infos sur les frameworks cités : 960gs, Blueprint.

Un petit exemple de code :

    $blue = PHPUi::getInstance()->blueprint(array('class' => 'container', 'id' => 'blueprint'));
    $blue->addChild(new Xhtml\Element('h2', array('span' => 24), true, '24 Column Grid - Blueprint'));
    $blue->addChild(new Xhtml\Element('div', array('notice' => true), true, 'This is a div with class notice'));
    $blue->addChild(new Xhtml\Element('div', array('error' => true), true, 'This is a div with class error'));
    $blue->jquery()->click( 
        $blue->jquery()->ajax( 
             array( 
                 'url' => 'ajax.php', 
                 'type' => 'POST', 
                 'dataType' => 'html',
                 'success' => 'function(data) { $("#blueprint").append(data); }' 
             ) 
        ) 
    );

On créé ici un nouvel élément utilisant l’adapter Blueprint, on peut donc directement initialiser des div de type error, notice ou alert en passant le paramètre à true. On applique ensuite un filtre jQuery qui au clic sur la div lancera un appel AJAX avec les paramètres donnés.
La librairie se charge ensuite de générer le code correspondant aux appels effectués.

Sachez qu’il est également possible de charger/décharger un ensemble d’éléments via un système d’adapter.
Exemple avec notre élément $blue de tout à l’heure :

     $dump = Xhtml\Dumper\DumperJson::dump( $blue );
     $loaderJson = new Xhtml\Loader\LoaderJson(array('content' => $dump));
     echo $loaderJson->load();

Ici on dump et on load un élément en JSON mais à terme il sera possible d’exporter/charger via n’importe quel format puisqu’il est possible de définir ses propres classes.

Si vous souhaitez regarder les exemples ou bien le code de la librairie, un dépôt Github existe :
https://github.com/seiyar81/phpui

La librairie est toujours en cours de développement, je suis donc ouvert aux propositions d’améliorations ou aux fonctionnalités à implémenter.

Catégorie: Développement Web, Javascript, PHP | Laisser un commentaire (2)

Giganews : On n’arrête plus le progrès

Posté par seiyar81 le 14 septembre 2012 | Laisser un commentaire (0)


 

Une nouvelle étape vient d’être franchie par l’équipe de Giganews, c’est désormais 1500 jours de rétention binaire qui sont offerts par la société, soit plus de 4 ans et 8 ans pour la rétention texte.
Tout ceci sur les plus de 110 000 newsgroups référencés.

 

Du côté des autres produits de la société on peut aussi noter l’arrivée cet été du partage public de fichiers sur DumpTruck.
Le service vous offre maintenant la possibilité de créer des liens vers un ou plusieurs fichiers, voire un dossier puis de le protéger par un mot de passe ou une date d’expiration.

 

Des mises à jour également côté applications. VyprVPN App pour Windows passe en version 1.3 et améliore globalement la sécurité, notamment au niveau du DNS poisoning.
L’application iOS pour gérer son compte Giganews passe quant à elle en version 1.1 et offre la possibilité de : suivre l’usage et l’historique du compte, désactiver à distance les connections VyprVPN, être au courant des dernières nouveautés.

Catégorie: Geek, Internet, Newsgroup | Laisser un commentaire (0)

Google Advanced Sitemap disponible pour Prestashop 1.4

Posté par seiyar81 le 3 juin 2012 | Laisser un commentaire (31)

EDIT 15/06/2012 : J’ai créé un dépôt Github afin de pouvoir partager les modifications apportées au plugin.

https://github.com/seiyar81/prestashop-advanced-sitemap

Suites aux remarques et à plusieurs demandes, j’ai fais évoluer le support des langages.
Vous pouvez maintenant, en plus de sélectionner quels langue inclure dans le sitemap, sélectionner l’URL sur laquelle se baser pour la génération et ce pour chaque langue.

EDIT 03/06/2012 : Nouvelle version du module avec support des langages (merci à roselan sur le forum de Prestashop) et génération d’un sitemap correctement formaté.

  Google Advanced Sitemap (13, 9 KiB, 659 hits)


Suite aux nombreuses demandes reçues je me suis enfin décidé à porter mon module de génération de sitemap vers Prestashop 1.4.
Depuis la version 1.4 l’équipe de développement de Prestashop a intégré le support des images des produits et des différentes langues activées sur la boutique.

Je suis donc reparti de cette base solide et stable afin de ré-inclure mes fonctionnalités de ping des moteurs de recherche.
Ainsi le module est capable de pinger les moteurs suivants :

  • Google
  • Bing (comprends Yahoo qui a fusionné avec l’index de Bing)
  • Ask.com

Potentiellement tous les moteurs de recherche peuvent être ajoutés, n’hésitez donc pas à me faire part de vos requêtes.

Sachez également qu’à chaque ajout, édition ou suppression de produit, le sitemap est ré-généré automatiquement.

Je reste bien évidemment ouvert aux propositions d’améliorations, de nouvelles fonctionnalités etc… et disponible s’il y a des problèmes.
Encore merci à tous pour vos remarques et suggestions.

Catégorie: Développement Web, Internet, PHP | Laisser un commentaire (31)

Réaliser une requête POST en PHP avec cURL

Posté par seiyar81 le 10 mai 2012 | Laisser un commentaire (0)

Voici un snippet d’une fonctionnalité que l’on ne trouve pas facilement dans la documentation de PHP : uploader un fichier avec la librairie cURL.

Cette dernière nous offre en effet de nombreuses possibilités pour gérer nos requêtes et ce qui nous intéresse plus particulièrement ici : les requêtes HTTP à l’instar de wget par exemple.


function curlUploadFile($url, $fileName) {

  $ch = curl_init();

  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  curl_setopt($ch, CURLOPT_VERBOSE, 0);
  curl_setopt($ch, CURLOPT_USERAGENT, "MY_USER_AGENT");
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_POST, true);

  $post = array(
    "upload_file"=>"@".str_replace("\\", "/", $fileName),
  );
  curl_setopt($ch, CURLOPT_POSTFIELDS, $post); 
  $response = curl_exec($ch);

  if(!curl_errno($ch))
  {
    return $response;
  }
  else
  {
    return curl_error($ch);
  }

}

Voilà en espérant que cela dépanne certains !

Catégorie: Développement Web, Internet, PHP | Laisser un commentaire (0)