Catégorie : développement – divers

ExtJs autoLoad et store : howto / comment faire

Si vous ne connaissez pas ExtJs, c’est « à peine » du JavaScript, « à peine » utilisé par IBM, et plein d’autres « petites » entreprises 😉 .

Très puissant mais il manque parfois d’exemple.

En voici un pratique que j’ai eu du mal à mettre en place : pourtant c’est du classique de chez classique.

Je veux ouvrir un onglet qui charge automatiquement des informations de base de données : un onglet dans lequel il y a les informations d’un dossier : nom, prénom, date de naissance, etc.

Assez classique.

Mais disons… que je veux en faire le moins possible. Avec ExtJs, c’est très simple. Enfin simple… après avoir bien cherché !

En fait, l’astuce est qu’il faut appeler la fonction autoLoad, pour que le chargement soit automatique, et avant même d’afficher l’onglet.

Dans mon cas, je voulais afficher Homme ou Femme dans un combo. Donc il fallait avant même d’afficher l’onglet, qu’il précharge le truc dans un magasin de données = store.

WordPress et JavaScript : mettre du code en dur dans vos articles

Si jamais un jour, comme moi, vous essayez de mettre du code JavaScript directement à l’intérieur de votre article – ou de votre page – alors irez dans l’onglet à droite ainsi :

Wordpress edition d'un article - onglet texte.jpg

Et vous taperez sûrement quelques lignes basiques comme celles-ci :

<script>
alert('bonjour');
</script>

Cela ne fonctionnera pas !

J’ai posé la question ici, et la réponse était : le code généré dans la page n’est pas correct, il faut le corriger… ce qui est vrai ! La seule solution que j’aie trouvé : écrire un fichier JavaScript externe, et l’embarquer dans la page. Malheureusement, j’ai codé la chose en dur, et je cherche actuellement parmi ces possibilités :

  • Soit pouvoir écrire du code qui ne sera pas retravaillé dans les articles / et / ou / pages ;
  • Soit pouvoir inclure des fichiers uniquement en fonction des pages.

Ce que je n’ai pas fait. Mais ma solution fonctionne, même si elle n’est pas la meilleure.

Solution 1

Je suis allé dans mon thème, et j’ai fait un include « générique » dans et j’y ai rajouté l’inclusion de mon script :

wp_enqueue_script( 'olivierpons', get_template_directory_uri() . '/js/op.js' );

C’était ici :
Wordpress description de l'inclusion de javascript dans un theme

Et là, j’ai pu écrire mon script, entièrement en JavaScript, qui n’est pas modifié par WordPress.

Pour information, ce script crée un formulaire complet afin de générer une requête SQL pour créer une base de données SQL avec un utilisateur et un mot de passe afin de copier coller le code pour créer la totale. Cela est si souvent fait que ça m’a lassé un peu et j’ai écrit ce code.

Vous pouvez retrouver ce formulaire dans cet article et dans cette page.

Solution 2

Les shortcode. Vous écrivez une function Php qui renvoie une chaine qui ne sera pas modifiée. Donc cette chaine peut tout à fait être du code dans une balise Javascript : <script>alert('bonjour');</script>. Seul problème : elle doit être codée en dur.

J’ai essayé de le contourner pour rendre le code entièrement dynamique.
Essayez ce code dans le fichier functions.php de votre thème :

if (!function_exists( 'foobar_func' )):
function foobar_func( $atts, $content, $tag ){
  echo $atts['script'];
  return (isset($content) ? $content : '');
}
add_shortcode( 'foobar', 'foobar_func' );
endif;

Puis essayez d’appeler la fonction ainsi dans un article :

[f oobar script="<script>
  jQuery(document).ready(function() {
    var j=jQuery('<div />');
  });
</script>"]

Et vous verrez que malgré tout, les paramètres sont retravaillés par WordPress et malmenés !

Au final, deux solutions

  • Ecrire un fichier JS externe, et l’inclure soit de manière générique dans toutes les pages, soit de manière dynamique (à vous de le paramétrer) :
  • La seconde qui consiste à écrire un shortcode et que ce shortcode renvoie le code Javascript au complet, sachant que le gros inconvénient, c’est que le code que vous renverrez sera difficilement lisible : en effet, ce sera une chaine de caractères « simple » dans votre fichier Php, il n’y aura aucune coloration syntaxique.

Coding game : les résultats : olivier pons

Je suis content, je suis 92ème sur 1167 :

Coding Game résultat pour Olivier Pons 92ème sur 1167

Dans les faits, si on enlève ceux qui sont à 0% (on ne sait pas s’ils ont participé ou pas), je suis 92ème sur 871. Ce qui n’est pas trop mal.
Si j’avais réussi à résoudre le second challenge en entier, j’aurais été dans les 40 premiers…

Vous pouvez avoir accès à mes codes sources ainsi qu’aux résultats ici.

J’étais content pour le premier, réalisé assez rapidement (32 minutes) :
Coding Game 2013 11 22 analyse 1

Alors que pour le second, j’ai galéré comme un fou (sachant que je suis allé chercher une pizzas et que je l’ai mangé en famille pendant le concours) :

Coding Game 2013 11 22 analyse 2

Ce qu’il y a de marrant, c’est qu’en travaillant en local, je me suis ressorti le fichier décompressé au format texte et c’était amusant à voir :

Coding Game 2013 11 22 notes de musiques fichier décompressé au format texte

Développement : Coding contest !

Nouveau challenge de codeurs !

C’est pour le fun, essayez vous aussi 

Le principe est simple

Vous aurez deux puzzles de programmation à résoudre.

Pour ce faire, vous pourrez choisir votre langage favori parmi ceux-ci : Java, C, C++, C#, Javascript, PHP, Python, Ruby, Objective-C, Haskell and Go.
La durée moyenne d’un challenge est de 2 heures et 30 minutes.

J’y serai, le 23 novembre !

Inscrivez vous !
Si jamais plus de trois personnes se sont inscrites via le lien précédent, et ont dépassé un score de 0% (= y sont allées), j’aurais un t-shirt codingame 😉

PhpStorm, Windows / WAMP et xdebug : howto – la solution

Si jamais vous êtes comme moi, et que vous n’avez pas réussi à faire fonctionner PhpStorm avec xdebug sous Windows avec WAMP, vous avez peut-être le même problème que moi à savoir : le serveur Apache semble mal configuré – ou configurable, et incapable d’utiliser Php correctement avec xdebug.

Je passe toutes les étapes de configuration « classiques », parce qu’elles sont simples et bien documentées – y compris dans PhpStorm. Malgré tout ça, il se peut que cela ne fonctionne pas.

La solution :

Solution PhpStorm RunDebug Configurations pour Windows - WAMP

En fait il faut configurer PhpStorm pour qu’il ne passe pas par Apache, mais qu’il lance le serveur Php intégré (si, Php a un serveur HTTP, cherchez dans la documentation).

Et ainsi, le déboguage en ligne fonctionnera.

C’est grâce à cette vidéo que j’ai eu l’idée d’essayer :

http://www.youtube.com/watch?v=LUTolQw8K9A

Bien sûr, si vous essayez xdebug sous Linux, vous aurez nettement moins de difficultés :).

CodinGame challenge : les résultats

Vous pourrez trouver la totale ici.

Je cite :

Sur les 3245 inscrits, 1124 ont tenu bon jusqu’à la fin. Et il faut dire que le niveau était plutôt excellent. Avec un 3e exercice que certains codeurs de notre connaissance auraient qualifié de « torture japonaise », le challenge nécessitait de jongler entre plusieurs compétences complémentaires.

Ils ont tout à fait raison, vu que… je ne l’ai pas fait !

Vous pouvez voir le classement complet ici.

Moi je suis le pseudo SurferIX, position 120 :

120 - SurferIX - 65% - 03:48:46 - PHP, C

Et mon code fait en 3 heures 48 ici.

De la nourriture pour le cerveau !

Pris ici, et traduit en français par moi même.

C’est mon site favori.

Je le visite presque tous les jours.

Il n’est pas « responsive ». Il n’est pas optimisé pour iPhone.
Il a l’air flou sur un affichage de type Retina.
Il n’utilise pas le tout dernier framework HTML5/CSS3.
Il n’a pas un « rythme vertical réfléchi pour être agréable ».
Les fontes n’ont rien d’original. Ni Le skeuomorphique ni plat.
Il n’a pas son propre favicon.
Il n’a aucune application native Twitter ou Instagram.
Il n’utilise ni d’AJAX ni de SCRUM ou de node.js ou de Sinatra.
Il n’a pas sa propre API ou son suivi RSS, et pas de VC funding.
Il n’a jamais été numéro un sur un blog technique connu et n’a jamais gagné un seul concours.

Il me dit comment faire la soupe du jour.

Une information donnée gratuitement, qui est pratique pour la personne qui le lit.

C’est ça, le web design.

Développement : Coding contest !

Challenge de codeurs !

C’est pour le fun, essayez vous aussi 

Le principe est simple

Vous aurez deux puzzles de programmation à résoudre.

Pour ce faire, vous pourrez choisir votre langage favori parmi ceux-ci : Java, C, C++, C#, Javascript, PHP, Python, Ruby, Objective-C, Haskell and Go.
La durée moyenne d’un challenge est de 2 heures et 30 minutes.

J’y serai, le 28 septembre !

Php : challenge ASCII art

J’ai fait un pari. Petit challenge à réaliser : faire un script (peu importe le langage) qui prend en paramètre un fichier image, et qui en sort de l’ASCII art.
Il faut qu’il soit rapidement paramétrable sur la taille des fontes.

Je l’ai fait « théorique » en 59 minutes, mais entièrement fonctionnel en une heure trente. J’ai fait deux scripts : un qui génère le fichier des fontes, et le principal qui lit le fichier image des fontes, et le fichier image en paramètre, et sort de l’ASCII art.

Exemple de résultat (si si c’est bien du texte, vous pouvez le sélectionner et copier coller en tant que texte !) :

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBMBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB¨ MBBBBBBMM0BBB
BBBBBBBBBBBBBBBBBBBBBBBBBP'`BB  ,BBBP¨    MBB
BBBBBBBBBBBBBBBBBBBBBBBBB&  %BMBPBBL  ,a  ¨BB
BBBBBBBBBBBBBBBBBBBBBBBBBB  jBB  MBBaBBP   BB
BBBBBBBBBBBBBBBBBBBBBBBBPM   BB  ¨BBB^  ,  0B
BBBBBBBBBBBBBBBBBBBBBBP`     BBb  BB'  mB  jB
BBBBBBB@P'BBBBBB@M@BBB   mB  $BK  0B  jBP  ¨B
BBBBBBBK  BBBP^`   MBB  dBB  MBB  jB   ¨ L,aB
B^¨ 'BBB  %BB  ,a   BB  &BBL  BB   Bh  ,WBBBB
B    ¨BB  jBB,mBM^  $B  'BBF  BBL  BBBBBBBBBB
BL    `BL  BBBP¨    jB   ^^   %B&mBBBBBBBBBBB
B&  w  ¨&  BBP  wB   B&    wamBBBBBBBBBBBBBBB
BB  %w     MBL  BB¨  BBBwamBBBBBBBBBBBBBBBBBB
BB  MBw    ¨BK  ¨`, ,&BBBBBBBBBBBBBBBBBBBBBBB
BBL  BBN    BB,  aBBBBBBBBBBBBBBBBBBBBBBBBBBB
BB&  BBBh   0BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBB  MBBBhwmBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBB  OBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

Ne regardez pas la suite si vous voulez essayer de le faire pour vous !

<?php
function usage_et_exit($message = '', $exit_error = -1) {
    global $argv;
    if ($message != '') {
        echo $message."\n";
    }
    echo $argv[0]." {image gif reference} {image noir et blanc jpg}\n";
    exit($exit_error);
}

function noir_ou_blanc($r, $g, $b) {
    /* http://stackoverflow.com/questions/254388/how-do-you-convert-an-image-to-black-and-white-in-php */
    if (((0.299*$r) + (0.587*$g) + (0.114*$b))> 0x7F) {
        return 0xFFFFFF;
    } else {
        return 0x000000;
    }
}

function cherche_meilleure_correspondance(
    $img_src, $x, $y, $img_fonts, $font_size, $tab_base
) {
    $meilleur = -1;
    $retour = '';
    foreach ($tab_base as $idx => $ch) {
        $match = 0;
        for ($t_y=0; $t_y<$font_size; $t_y++) {
            for ($t_x=0; $t_x<$font_size; $t_x++) {
                if (imagecolorat($img_src, $t_x+$x, $t_y+$y)
                    != imagecolorat(
                        $img_fonts,
                        ($idx*$font_size) + $t_x, $t_y
                    )
                ) {
                    $match++;
                }
            }
        }
        if ($match>$meilleur) {
            $retour = $ch;
            $meilleur = $match;
        }
    }
    return $retour;
}

function convert_img_noir_et_blanc($filename, $img)
{
    list($width, $height, $type, $attr) = getimagesize($filename);
    /* Conversion en noir et blanc */
    for ($y=0; $y<$height; $y++) {
        for ($x=0; $x<$width; $x++) {
            $rgb = imagecolorat($img, $x, $y);
            $r = ($rgb >> 16) & 0xFF;
            $g = ($rgb >> 8) & 0xFF;
            $b = $rgb & 0xFF;
            $nb = noir_ou_blanc($r, $g, $b);
            imagesetpixel($img, $x, $y, $nb);
        }
    }
}

$tab_base = array(
    '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
    'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
    'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',
    'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4',
    '5', '6', '7', '8', '9', '&', '\'', ',', ';', ':', '?', '.', '/', '!',
    '%', '^', '¨', '$', '~', '#', '(', ')', '[', ']', '|', '-', '`', ' '
);
$font_size = 14;
$min_width  = 400;
$min_height = 400;

if ($argc!=3) {
    usage_et_exit("Arguments invalides", -1);
}

$img_tmp = imagecreatefromstring(file_get_contents($argv[1]));
$width = imagesx($img_tmp);
$height = imagesy($img_tmp);
$img_fonts = imagecreatetruecolor($width, $height);
imagecopy($img_fonts, $img_tmp, 0, 0, 0, 0, $width, $height);
imagedestroy($img_tmp);
unset($img_tmp);
if ($img_fonts===false) {
    usage_et_exit("Erreur chargement de ".$argv[1], -1);
}

/* Conversion en noir et blanc des fontes */
convert_img_noir_et_blanc($argv[1], $img_fonts);
imagepng($img_fonts, './resultat_fonts.png', 0);

list($width, $height, $type, $attr) = getimagesize($argv[2]);
if ($width<$min_width) {
    usage_et_exit("Largeur trop petite de ".$argv[1].", taille min = ".$width_min, -1);
}
if ($width<$min_height) {
    usage_et_exit("Hauteur trop petite de ".$argv[1].", taille min = ".$width_min, -1);
}

$img_src = imagecreatefromjpeg($argv[2]);
if ($img_src===false) {
    usage_et_exit("Erreur chargement de ".$argv[2], -1);
}
convert_img_noir_et_blanc($argv[2], $img_src);
/* Ok on a l'image en noir et blanc. Parcourir toute l'image */
imagepng($img_src, './resultat_noir_et_blanc.png', 0);

$y = 0;
$max_result = 0;
while (($y + $font_size) < $height) {
    $x = 0;
    while (($x + $font_size) < $width) {
        echo cherche_meilleure_correspondance(
            $img_src, $x, $y, $img_fonts, $font_size, $tab_base
        );
        $x += $font_size;
    }
    echo "\n";
    $y += $font_size;
}
echo "Done.\n";
?>

Et le fichier qui génère les fontes (22 minutes de perdues à le faire…) :

<?php
$tab_base = array(
    '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
    'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c',
    'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',
    'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4',
    '5', '6', '7', '8', '9', '&', '\'', ',', ';', ':', '?', '.', '/', '!',
    '%', '^', '¨', '$', '~', '#', '(', ')', '[', ']', '|', '-', '`', ' '
);
$x=0;
$font_size = 14;
$width = count($tab_base)*$font_size;
echo 'width='.var_export($width,true)."\n";
$height = $font_size*4;
$img = imagecreatetruecolor($width, $height);
if ($img===false) {
    throw new Exception("Erreur");
}
imagefilledrectangle($img, 0, 0, $width, $height, 0xFFFFFF);
foreach ($tab_base as $idx => $char) {
    $ok = imagettftext(
        $img,
        $font_size, 0,
        $idx * $font_size, $font_size,
        0x000000,
        './consola.ttf', $char
    );
}
imagegif($img, './test.gif');
echo "Done.\n";
?>