Télécharger Adobe Flash player

Un peu de jQuery

Le 12 septembre 2010 dans la catégorie stage

Cette semaine j’ai fait de l’optimisation de code et j’ai effectuée des modifications sur les 2 projets que l’on m’a confiée durant se stage. Depuis maintenant 2 mois, j’ai beaucoup fait de code JS, et donc évidement j’ai énormément utilisée jQuery. Aujourd’hui j’ai donc décidée de vous faire un peu de jQuery.

Tout d’abord voici 2 penses -bete pour jQuery :

jQuery-Visual-Cheat-Sheet-1.4.2.
impulse_studios-jquery_cheat_sheet-1.0

Maintenant quelques fonction qui m’ont été utiles ces derniers jours.

.split()

La fonction split permet de diviser une chaine de caractère en tableau. Ex:

var chaine = “bonjour tout le monde”;
var tab=chaine.split(”");
Résultat : tab = bonjour, tout, le, monde

.substr(indice du début, nombre de caractère)

La fonction permet d’extraire une chaine de caractère. Ex:
var chaine=”bonjour tout le monde”;
var chaine2= chaine.substr(8,4);
Résultat : chaine2= tout

2 fonctions utiles pour créer un loader : .hide() et .show()

.show() permet d’afficher un contenu, et .hide() permet d’enlever le contenu. Ex:
< div id=”loader” > le contenu de mon loader </div>
Dans mon code je vais donc écrire : $(”#loader”).show(); j’affiche ma div
Et plus loin de mon code (après avoir effectué toutes mes fonctions) j’enlève ma div :
$(”#loader”).hide();

C’est la rentrée

Le 05 septembre 2010 dans la catégorie stage

Cette semaine était la semaine de rentrée pour l’entreprise, retour de vacance pour tout le monde. En le début de la semaine, petit présentation à mon tuteur et au manager de mon équipe. Présentation de la cartographie fait au mois de Juillet, ils étaient très satisfait de mon travail, juste un ou deux points à modifier, et d’icic peu nous mettrons en place mon travail en ligne. Puis présentation de l’élargissement de la recherche sur lequel j’ai bien avancé envore quelques mise au point et tout sera fini.

La dernière fois je vous ai donner un code pour cocher tout les checkbox. Aujourd’hui je vais vous expliquer comment récupérer la valeur d’un bouton radio.

Dans votre HTML:

<form id=”formulaire”>
<input type=”radio” name=”btn” value=”1″ /> bouton 1
<input type=”radio” name=”btn” value=”2″ /> bouton 1
</form>

Puis dans votre JS


for(i=0,i<="ton nombre de boutonradio“,i++){
if(document.formulaire.btn[i].checked){
VarRecup=document.formulaire.btn[i].value;
}
}

Pour le nombre de boutonradio soit vous le connaissez donc vous pouvez donner directement le nombre, sinon il faut marquer: document.formulaire.length

Petite fonction en JavaScript

Le 27 août 2010 dans la catégorie stage

Cette semaine j’ai continué à travailler sur ma popin pour l’élargissement des recherches, un peu de CSS pour styliser la popin en fonction de la maquette, et surtout beaucoup de JavaScript.

Je vais vous donner un petit script bien utile dont j’ai eu besoin cette semaine. Ce script vous permet de cocher toutes les checkbox d’un formulaire. Tout d’abord votre HTML :

<form name=”formulaire”>
<input type=”checkbox” name=”toutcocher” value=”toutcocher” onclick=”toutcocher();”> Tout cocher //vous pouvez utiliser un lien au lieu d’un input pour tout cocher ( à vous de voir )
<input type=”checkbox” name=”1″ value=”1″> Valeur 1
<input type=”checkbox” name=”2″ value=”2″> Valeur 2
<input type=”checkbox” name=”3″ value=”3″> Valeur 3
<input type=”checkbox” name=”4″ value=”4″> Valeur 4
…..
</form>

Et voilà le code JavaScript

function toutcocher()
{
    for(i=0;i<document.formulaire.length;i++)
    {
      if(document.formulaire.elements[i].type==”checkbox”)
      document.formulaire.elements[i].checked=true;
    };
}

Et voilà un code tout simple et bien utile :)

Popin en jQuery

Le 20 août 2010 dans la catégorie stage

Pour créer une popin en jQuery il y a plusieurs façon de proc&egarv;der, pour cette article je vais vous parler du plugin Impomptu de jQuery que j’utilise actuellement. Vous pouvez récupérer le code du plugin ici.

Ce plugin contient plusiseurs options qui vous permettrons de personnaliser votre popin, vous pouvez changez le CSS, personnaliser les boutons …

Pour une popin toute simple : $.prompt(’votre texte a afficher’);

Pour une popin avec plusiuers états le code est plus long certes mais loin d’être compliqué:


1. function openprompt(){
2. var statesdemo = {
3. state0: { // Premier état
4. html:’test 1.test 1..test 1…’, // on ajoute du text
5. buttons: { Cancel: false, Next: true }, // Initialisation des boutons
6. focus: 1,
7. submit:function(v,m,f){
8. if(!v) return true;
9. else
10. $.prompt.goToState(’state1′);
11. return false;
12. }
13. },
14. state1: {
15. html:’test 2′,
16. buttons: { Back: -1, Exit: 0 },
17. focus: 1,
18. submit:function(v,m,f){
19. if(v==0) $.prompt.close()
20. else if(v=-1)
21. $.prompt.goToState(’state0′);
22. return false;
23. }
24. },
25. state2: {
26. html:’This is the next one
test 3′,
27. buttons: { Back: true, Done: false },
28. submit:function(v,m,f){
29. if(!v)
30. return true;
31. else $.prompt.goToState(’state1′);//go back
32. return false;
33. }
34. }
35. };
36. $.prompt(statesdemo);} // On lance le plugin
Vous pouvez voir le résultat de cette example ici.

Ceci n’est qu’un petit exemple des possibilité de ce plugin, pour en savoir plus et voir plus d’exemples aller voir le tuto (en anglais bien sûr) ici.

L’élargissement de la recherche

Le 11 août 2010 dans la catégorie stage

Nouvelle mission : l’ élargissement de la recherche.

A l’ heure actuelle, la fonctionnalité de recherche ne permet pas d’ élargir les critères aux environs, en établissant un rayon de recherche en km autour de la ville entrée.

L’ objectif de ma mission est de permettre à l’utilisateur de définir un rayon en km autour de la ville ou du quartier qu’il a choisi, dans lequel appliquer les paramètres de recherche. La demande est d’élargir la recherche à un certain nombre de kilomètres autour de la localisation choisie.

Au niveau de l’interface, un lien sous la recherche géographique sera créé. Un clic sur le lien ouvrira une fenêtre pop-up.Chaque onglet aura une liste déroulante de checkboxes accompagnées des noms des villes concernées par le critère de recherche, permettant de retourner les annonces de toutes les villes pour un rayon de recherche donné. A côté de ces villes, devra être affiché le comptage des annonces pour chacune (si possible).L’utilisateur pourra alors choisir les villes qui l’intéressent dans la liste. Lors de la validation par l’utilisateur, nous renverront une requête sur le serveur pour récupérer les annonces des villes cochées. Un niveau intermédiaire de recherche doit apparaître dans le cas où l’utilisateur a fait une recherche sur plusieurs villes/quartiers à la fois :
Une fenêtre pop-up apparaît, demandant à l’utilisateur de choisir la ville (ou le quartier) sur laquelle il veut élargir la recherche.Une fois le choix effectué, on peut procèder normalement.

1 mois à Seloger.com

Le 07 août 2010 dans la catégorie stage

Et voilà cela fait 1 mois que je suis en stage chez Seloger.com, le premier mois c’est très bien passé. Pour mon premier mois de travail au sein de l’équipe je me suis principalement occupée de la cartographie des agences sur la home du site seloger.com qui sera bientôt en ligne. Mon prochain projet au sein de l’équipe sera l’élargissemnt des recherches toujours sur seloger.com

Dans l’entreprise, le mois d’Aout est le mois de vacances pour les employés, ce qui fait que depuis le début de la semaine l’équipe est réduite de moitié (dans mon bureau nous ne sommes plus que 4 ). Les locaux sont vides, plus de responsables(les managers sont en vacances!!!). Et cette semaine fut la dernière semaine de travail pour l’équipe du marketing, ils ont installés un filet de ping-pong dans la salle de réunion, apportés un ballon de foot pour jouer dans le couloir, et ont décidés de s’attaquer a leur stagiaire en la scotchant à une chaise!! ( heureusement mon équipe ne compte pas me faire çelà !!!).

Pour moi cette semaine fut consacrée à de l’optimisation de code (JavaScript) et un peu de CSS pour ma cartographie. Ce fût donc une semaine calme pour moi avant d’attaquer des semaines plus chargée. Donc rien de particulier à vous dire cette semaine, à part que l’entreprise et mon rôle dans cette équipe me correspond tout à fait et je compte bien y rester.

La géolocalisation partie 2 (les marqueurs)

Le 01 août 2010 dans la catégorie stage

Et voilà après 2 semaines de travail sur la géolocalisation et environ 800 lignes de codes javascript , la cartographie des agences sur seloger.com est enfin fini :)


cartographie des agences


Elle sera intégrée officiellement sur le site dans quelques semaine après validation de mes supérieurs.


Dans mon article précédent je vous ai montré un bout de code pour insérer un carte basique, je ne vais pas vous expliquer tout mon code (qui est très long) mais je vais pour le moment vous parler des marqueurs.

Comme vous pouvez le voir sur l’image de ma carte mes marqueurs sont simple, une icône classique et juste un nombre qui s’affiche dessus. Mais croyez moi c’est beaucoup plus compliqué.


Tout d’abord le chiffres que j’ai inséré sur l’icône représente le nombre d’agence se trouvant autour de ce point. Et c’est  ce petit détail qui m’a compliqué la tache. Il faut savoir que dans le langage de googlemap, l’insertion de marqueurs se fait avec la fonction GMarkers, mais le souci c’est que cette fonction reste limité.


Avec GMarkers il m’est impossible d’insérer du texte dynamique dans mes marqueurs. Donc pour cela il m’a fallu faire appel à une autre fonction (mais qui n’est pas insérer dans le  script de googlemap). J’ai donc utilisé la fonction LabeledMarker (qui me permet de personnaliser un peu mieux mes marqueurs). Pour utiliser cette fonction ilvous faut tout d’abord créer un script labeledmarker.js et y insérer le code de cette fonction que vous pourrez trouver ici.


Je crée donc une fonction qui me permettras d’afficher mes marqueurs au bonne endroit et avec les options souhaitées.


/* Add Markers with Text */
this.setMarker = function (lat, lon, markerOpts, str, opts) {
var marker;

marker = new LabeledMarker(new GLatLng(lat, lon), opts);

// Add to Markers array for removal
this.markerArray[this.markerArray.length] = marker;

this.map.addOverlay(marker);
marker.addInfoBox(markerOpts);

}


Cette fonction me permet d’afficher les marqueurs. Mais avant d’exécuter cette fonction il faut que je récupère les différentes données des agences (représenté par les marqueurs). Pour cela comme je l’ai dit dans l’article précédent je fais un appel de mon XML où est stocké la longitude et latitude des  agences ainsi que les coordonnées des agences.


// Start Ajax call to retrieve xml data
$j.ajax({
type: ‘GET’,
url: ajax_url_m,
data: this.qry_page,
dataType: ‘xml’,
success: function (xml) {

$j(xml).find(’marker’).each( function (i) {

// Init variables
_lat = $j(’lat’, this).text();
_lng = $j(’lng’, this).text();
_nbagences = $j(’nbagences’, this).text();
_nom = $j(’nom’, this).text();
_codeinsee = $j(’codeinsee’, this).text();
_idquartier = $j(’idquartier’, this).text();
_iddivision = $j(’iddivision’, this).text();
_poly = $j(’poly’, this).text();
_levels = $j(’levels’, this).text();

});



Puis je fais un appel de ma fonction setmarker en lui passant comme paramètres les données des agences.


SLMapPointer.setMarker(
_lat,
_lng,
{
‘nom’: _nom,
‘idq’: _idquartier,
‘code’: code,
‘markerLat’: _lat,
‘markerLng’: _lng,
‘map’: tmpMap,
‘iteration’: i,
’slagence’: SLMapPointer,
‘nbagences’: _nbagences,
‘qry’: SLMapPointer.qry_page,
},
‘<span class=”mapOverlay”>’ + _nom + ‘ (’ + _nbagences + ‘ agences)</span>’,

// Voici les options de mes marqueurs
{
‘labelClass’: labelClass, // la class de mes marqueurs pour pouvoir les stylisé en css

‘labelText’:  _nbagences , // le texte que je désire afficher sur l’icone

‘icon’: SLIconPointer, // l’icone qui est un .png créer auparavant
‘clickable’: true, // je décide de mettre mon marqueur cliquable
}
);


Et voilà tout cela pour afficher une petite icône avec un texte dynamique !!!



Attention dans votre HTML faites d’abord l’appel au script de googlemap, puis au script de la fonction LabeledMarker et enfin l’appel de votre propre script.

La géolocalisation

Le 24 juillet 2010 dans la catégorie stage

Cette semaine fut consacrée à la géolocalisation sur le site seloger.com, depuis quelques mois quand vous faites une recherche d’un bien sur le site de seloger une cartographie des annonces ciblé sur votre recherche apparait.  Actuellement l’objectif est de reprendre se système de géolocalisation mais pas pour les annonces, pour les agences. Et cette cartographie des agences sera intégrée sur la home de seloger.  Cette carte se centre suivant 2 critères :

- Si c’est votre première visite la carte se centreras en fonction de votre adresse IP

- Et sinon la carte seras centrée en fonction de votre dernière recherche.

Alors avant de se lancer dans le code 1 lien  à aller voir :  le guide pour developer de google map, ( a garder dans ces marques pages :) )

Puis se procurer une clé api pour google map.

Etant donnée que le but est de centrer la carte en fonction des données des utilisateurs et étant sur ID3x, il me faut tout d’abord créer un fichier XML , d’où je pourrais faire mes appel de macro et récupérer les informations nécessaire. Puis création de ma page HTML, où je crée seulement une <div> avec un ID=”map_canvas”  et bien sur je fais l’appel de ma feuille de javascript.  Je crée ensuite ma feuille de script.

Dans mon script, j’utilise du JavaScript (bien sur) avec JQuery et de l’ AJAX. L’ AJAX me permettra de récupérer les informations de mon XML ( attention à bien créer son XML sans erreurs, j’ai perdu une journée de travail en pensant que mon script était faux alors que j’avais tout simplement une petite erreur dans le XML).

Pour insérer une carte le code est assez simple et court :

<script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
      }
    }

    </script>

Mais là une simple carte s'affiche. Pour obtenir une carte plus complexe
suivant différentes informations le code est plus long et plus recherché.
Pour l'instant après plusieurs jours de code j'en suis à environ 400 lignes
de code et j'arrive à afficher la carte correctement en fonction des 2 critères,
il me reste maintenant une semaine pour afficher les markers des agences,
et stylisé tout ça. D'ici quelques semaines vous pourrez donc voir l'intégration
de la cartographie des agences sur seloger.com

SelogerNeuf Pro

Le 15 juillet 2010 dans la catégorie stage
Comme je vous l’ai dit précedement le groupe SeLoger gère plusieurs sites. Je travail principalement sur 2 sites du groupe: seloger.com et selogerneuf.com.
Ces 2 sites permettent aux utilisateurs de trouver un logement parmis des milliers d’annonces des différentes agence, mais pour que les agences puissent mettre leurs annonces en ligne une partie pro leurs a été dédiés.

Le site SelogerNeuf.com étant en refonte, il est prévu de faire également une refonte du site selogerneufpro.com. Cette refonte sera finalisé d’ici 2011, mais pour commencer j’ai du travailler sur le logo SelogerNeufPro.
Après 2  3jours de travail et de petite veille sur les logos (pour avoir un peu d’inspiration!), j’ai fait 3 propositions à mon équipe. Il me fallait gardé le logo officiel de SelogerNeuf  et rajouter le “Pro”, l’idée était de garder les couleur du logo de base et d’utiliser les couleur du nouveau site (je me suis donc inspiré des couleurs du site SelogerNeuf.com).
Leur choix c’est porté sur la première proposition, et depuis hier le logo est officiellement mis en ligne sur le site SelogerNeufPro.com
logo_selogerneufpro

A la découverte d’ID3x chez SeLoger.com

Le 10 juillet 2010 dans la catégorie stage

logo_seloger

Première semaine de stage chez SeLoger.com (le n°1 de l’immobilier sur internet). SeLoger.com est un groupe qui s’occupe de plusieurs site sur internet : Seloger.com,SelogerPro.com, SelogerNeuf.com, Agorabiz.com, Immostreet.com, Lacoteimmo.com, Bellesdemeures.com.


Le point fort de cette semaine fut le découverte du fameux ID3x.

Pour la petite histoire, ID3 signifie Internet Directory Tree (3), ce qui ne signifie rien!

Il s’agit d’un WebEngine, c’est à ire un système qui permet de gérer et afficher du contenu dynamique (textes, images, …) indépendamment du code HTML. ID3x est sa deuxième version, entièrement re-développée en C# sous l’environnement Microsoft.Net. Il a été développé à POLIRIS pour ses filiales. Sa maintenance est effectuée par Charles Sauthier.

Sa principale caractéristique, celle qui nous intéresse, est de séparer complètement le code de programmation (le langage) du code HTML (l’aspect des pages web), l’un dans des modules de programmation, l’autre dans des templates réunis en skins.

ID3x est doté d’un langage de macro suffisamment souple pour permettre toutes les applications inimaginable, de manière plus ou moins simple. Beaucoup des taches fastidieuses pour le développeur du site web sont déjà intégrées.

Il existe différents types de macros.


Les macros B (boucle) renvoient une suite de valeur de manière itérative, et permettent donc de définir un bloc dans la page HTML à répéter à chaque itération. En général il s’agit d’une requête SQL renvoyant N lignes. Elles sont toujours accompagnées des macros BIF et BFIN, DO et LOOP, plus éventuellement les macros BIF0 et BFIN.

Exemple:

$$B:TEST:LISTE:PARAM1:PARAM2$$$$BIF:TEST:LISTE:PARAM1$$

$$TEST:LISTE:PARAM1:NBR$$ résultats trouvés :<BR>

$$DO:1:7$$

$$TEST:LISTE:PARAM1:I$$) $$TEST:LISTE:PARAM1:JOUR$$<BR>

$$LOOP$$

$$BFIN$$

$$BIF0:TEST:LISTE:PARAM1$$

Pas de résultat trouvé.

$$BFIN$$



la suite d’ID3x prochainement …