[thème WP] Premières réflexions

Je vous en avais déjà parlé, je me lance dans la création d’un thème pour WP (wordpress). Avant de faire les premiers croquis, il faut que je sache plus ou moins ce que je veux mettre dedans.

[annonce] Création d’un thème pour wordpress

Bonjour à tous!

Voilà, cela fait bientôt trois mois que je blog et ça me plait. Je vais donc m’investir un peu plus. Concrètement cela va se traduire par plusieurs choses.

Gest’XV devient teamManagerXV

Je vous parlais il y a quelques jour de mon nouveau projet. Il vient de changer de nom. Je trouve teamManagerXV plus sexy. Bien sur je ne vais pas faire un billet uniquement pour ça!

J’ai pas mal avancé aujourd’hui : création de la charte graphique (enfin plus ou moins), création des formulaires d’ajout d’un club, d’une équipe et d’un joueur. Jusque là rien de très emballant surtout que je n’ai pas encore peaufiner les formulaires (tant au niveau visuel que vérifications).

Par contre je me suis bien amusé pour faire la gestion des effectifs. En effet j’ai géré ça un peu comme flickr avec ses albums photos. C’est à dire avec des drag’n drop des joueurs (grâce à interface et JQuery). Ce que je n’avais jamais fait c’était la sauvegarde automatique en AJAX! Et je trouve que cela a un effet bluffant. Hop j’ajoute un joueur puis je fait glisser mon joueur dans une équipe je change de page, je reviens (ou un petit f5) et magie mes équipes ont été conservées!  Bon d’accord c’est pas nouveau, on l’a tous déjà vu…Certes! Mais dans ce cas je l’ai fait tout seul, juste avec la doc :p! Ne vous inquiétez pas je ferais un petit tutoriel là dessus très prochainement!

Prochaine étape : création d’une feuille de match, gestion de la présence aux entraînements, statistiques de présence, gestion de la session (qui peut faire quoi), puis plein d’autres choses. Vi…j’ai des nouvelles idées toutes les 5 minutes…

Vous aussi vous bossez sur un projet? Parlons en!

A bientôt!!

Nouveau projet : gestion d’une équipe de rugby

Je commence un nouveau projet! En plus de ceux en cours…mon cv, ma seconde version de gestion de cave à vin en ligne, ce blog enfin bref des journées à rallonges quoi! Cependant cela va me permettre d’expliquer au fur et à mesure comment j’organise mon travail. Ça pourra peut être vous servir ou peut être aurez vous des suggestions à me faire!

Ce sera l’occasion pour moi de faire quelques tutoriel sur ma façon de faire de l’ajax, ou sur les drag’n drop avec JQuery. Plein de choses intéressantes!

• Le projet Gest’XV

L’origine du projet est simple : je joue au rugby et comme je suis capitaine il m’arrive d’assister à la composition des équipes. Et quelle fût ma surprise en voyant que ces composition étaient faites sur excel. Donc pas très pratiques pour faire des stats sur les différents matchs ou encore quand il s’agit de retaper les noms des joueurs. J’ai donc proposer à mon coach de lui faire un outil qui lui permettra de créer ses feuilles de matchs très rapidement. Après quelques discussions d’autres besoins sont apparus : présence aux entraînements, fiche de joueur détaillé, historique des temps de jeu, plusieurs “rôles” au niveau de l’administration afin de pouvoir déléguer certaines tâches…Bref un projet relativement complet et intéressant.

J’ai réalisé un premier jet sur la composition de l’équipe. J’ai utilisé JQuery pour faire les drag’n drop et je vous expliquerais très prochainement comment j’ai fait.

• Comment?

Pour réaliser Gest’XV (oui c’est le ptit nom que je lui donne pour le moment lol) je vais utiliser XHTML 1.1, PHP, MySQL, Javascript avec JQuery et les CSS. Je vais essayer de créer un design sympa avec photoshop. MEs objectifs sont presque tout le temps les mêmes quand je commence un projet : aller vite, faire du code valide, faire du code maintenable et apprendre des technologies (par exemple faire de l’ajax avec JQuery j’ai jamais fait ). Je reviendrais sur le XHTML 1.1 parce que HTML 5 vient de sortir et j’aurais pu faire ce choix là.

• Conclusion

Tout ça pour exprimer mon enthousiasme!  C’est mon premier projet qui associe mes 2 passions : le rugby et le développement web. Je vous ferais suivre l’évolution du site ! N’hésitez surtout pas à me faire des suggestions d’améliorations!

Vous aussi vous avez des projets en cours? Je serais ravi d’en parler sur ce blog! A bientôt!

[tuto mashup] Galerie photo animée via Flickr : récupérer les photos (1/2)

Ça y est! Il est là, il est tout nouveau tout beau! Le tutoriel pour faire une galerie photo animée avec JQuery et qui utilise flickr pour héberger vos photos. Un bon petit mashup quoi! Pour voir ce que ça donne un peit test ici… Allé gogogogogo!

• Flickr

Bon, on veux héberger nos photos chez flickr. Donc…il vous faut un compte flickr (si ce n’est déjà fait!). Allé hop hop hop on s’inscrit. Si vous avez un compte yahoo! cela devrait être ok. L’ inscription ça c’est fait. Un petit mail de validation plus tard vous voila connecter sur votre compte flickr.
Pour la suite sur flickr je vous ai préparé un tutoriel vidéo. Je vous conseille de le suivre en entier, surtout pour la fin!

• Le php

Alors là on rentre dans le vif du sujet. Nous allons utiliser une classe php. Des notions de POO serait un plus mais si vous n’y connaissez rien en POO pas de problème vous pouvez continuer. Pour commencer vous devez >>télécharger la classe basée sur l’API de flickr<<. C’est elle qui va nous permettre d’afficher nos photos. Créez vous un dossier dans lequel vous décompressez l’archive. Créez y aussi un nouveau fichier php, par exemple : test-flickr.php.

Activer la librairie curl : Il faut à présent vérifier que votre serveur local soit configuré correctement. Ouvrez votre php.ini et trouvez le bloc qui contient toutes les extensions de php. Il faut ensuite décommenter (enlever le “;” au début de la ligne) la ligne suivante : extension=php_curl.dll. C’est presque fini. Allez dans votre dossier “php” dans easyPhp ou dans WAMP et copier les fichiers libeay32.dll et ssleay32.dll dans votre dossier windows/system32 ou windows/system suivant votre version de windows.

Place au code :

La première ligne va concerner l’inclusion de notre classe :

<?php

require(‘flickr.php’);

Ensuite pour pouvoir utiliser l’API nous devons obtenir une deux clés (gratuites). C’est le cas pour la quasi-totalité des API. La première clé s’obtient en remplissant ce formulaire :

La seconde clé suivez le lien indiquez par la flèche rouge. Elle se situe sous la première clé et s’appelle clé de “secret partagé“. Nous pouvons maintenant nous connecter à flickr via l’API.

// Paramètres API :

$apiKey = ‘010e84b635468**********8d7a0f322′;
$apiSecret = ‘989******aa1418e’;

La variable $apiKey correspond à la première clé. Pas la peine de traduire pour la seconde .

Vous vous souvenez des id que vous avez notés au début? Re-sortez les!

// Id du User :

$userId = ‘227*****@N07′;

//Id de l’album :

$albumId = ‘72157*********064′;

Nous y voilà. Nous allons instancier notre classe Flickr. C’est à dire que nous allons créer un objet à partir de notre classe. Voila comment ça se passe :

// Nouvelle instance de Flickr :

$flickr = new Flickr( $apiKey , $apiSecret );

Notre nouvel objet : $flickr. C’est lui qui gère la connexion avec l’API. On va créer une instance de notre album maintenant. Même combat sauf que la classe change de nom :

// Nouvelle instance de Album :

$album = new Album( $flickr , $albumId , $userId );

Enfin! Nous avons notre album. On comprend rapidement les arguments que l’on transmet lors de l’instance : notre objet $flickr pour se conecter, notre identifiant d’album $albumId et notre identifiant utilisateur $userId. On a donc ce qu’il nous faut pour accéder à nos photos : Notre objet $album.

Pour ce tutoriel j’utilise la méthode getPhotos(). C’est celle qui nous donne le plus de données utilisables. Pour le moment nous allons nous contenter d’afficher les miniatures de nos photos.

// Affiche les “thumbs” de toutes les photos de l’album :

foreach( $album->getPhotos() as $photo ) {
echo $photo['imgThumbs'] ;
}

?>

Le foreach permet d’assigner à la variable $photo chaque “ligne” ou “tuple” (pour reprendre un langage plus orienté base de données) renvoyés par la methode getPhotos(). Si vous voulez avoir le détail de ce que renvoi getPhotos() pour faire mumuz et modifier le script à votre guise, remplacez la ligne du echo par :

var_dump($photo);

Un petit test dans firefox votre navigateur favori et normalement vous devriez avoir toutes vos miniatures!

Un grand merci à scriptsphp pour cette classe et la doc fournie. D’ailleurs n’hésitez pas à aller faire un tour sur leur site pour voir toutes les méthodes qui existent.

 

La prochaine étape du tutoriel portera sur l’aspect animation de la gallerie histoire d’avoir un truc présentable!

Si vous avez fait des essais postez vos url’s en commentaire. Pareil si vous avez des bugs, problèmes remarques, etc etc n’hésitez surtout pas!! A très bientôt pour la suite!

 

EDIT : la suite est ici!