Add Me!Close Menu Navigation
Add Me!Open Categories Menu
20 avril
Catégorie(s) : Non classé
0

La version Beta du site Profitvacances.com est ouverte

Je vous laisse découvrir ce site permettant de Louer son appartement et voyager chez l’habitant

ouverture de profitvacances.com

29 octobre
Catégorie(s) : API, Développement, javascript
0

API google map : localiser une adresse et styliser une carte

Sur le site morethanamap Google montre la richesse et les possibilités d’utilisations de ses cartes google map. Je vous invite à visualiser les différentes démonstrations présentes sur le site qui montrent la puissance du système.

Sans aller très loin je vous propose dans cet article de voir comment utiliser certaines de ses fonctions grâce à l’API javascript de google map. Ces exemples sont fortement inspirés (voir pompé pour le premier) sur la documentation de google. Le résultat des 3 utilisations que l’on va mettre en place est visible ici.

1) Afficher une carte basique :

Il faut d’abord appeler l’API de google avec la clé que vous pouvez obtenir en suivant les indications de cette page, et insérer dans le head de votre page html

1
2
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE&sensor=false&libraries=places">
</script>

Ici le paramètre librairie=place nous servira pour le second exemple.(il est donc optionnel et inutile pour l’affichage simple d’une carte.)
Notre code html contiendra seulement :

1
<div id="ma_carte1" class="carte"></div>

avec un petit style css pour indiquez la taille de la carte

1
.carte {height:500px;width:100%;margin-bottom:10px;}

Vient ensuite notre code javascript pour afficher la carte a des coordonnées précisent :

1
2
3
4
5
6
7
8
9
function initialize(lat, lng, carte) {
   var mapOptions = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById(carte),
   mapOptions);
}

que l’on va appeler dans le body de la page de cette manière :

1
<body onload="initialize(43.610769, 3.8767159999999876, 'ma_carte_1')">

Alors c’est bien beaux tout ça mais vous allez me dire, « d’où sortent ces coordonnées (ici celles de Montpellier) ? » Et bien vous avez raison, on va passer à une étape supplémentaire qui nous permettra de récupérer ces coordonnées pour pouvoir ensuite afficher la carte correspondante. On en profitera aussi pour récupérer les informations sur l’adresses précise, et tant qu’a y’être on placera un marquer sur la carte déplaçable à la souris, qui mettra a jour nos coordonnées et adresse précise.

2)Géolocalisation avec la « librarie » places

Pour faire tout ceci, on va d’abord mettre en place notre code html, il permettra de donner des coordonnées par défaut (à l’ouverture de la page) et d’afficher les données précisent (rue, ville, code postal…) aux changement d’adresse

1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" name="addresspicker" id="addresspicker" style="width:300px;" />
<br />
<input type="text" name="latlng" id="latlng" value="43.610769, 3.8767159999999876" placeholder="coordonées" readonly="readonly" >
<input type="text" name="adressgmap" id="adressgmap" style="width:600px;" placeholder="adresse complète" readonly="readonly" />
<br />
<input type="text" name="rue" id="rue" placeholder="rue" readonly="readonly" />
<input type="text" name="ville" id="ville" placeholder="ville" readonly="readonly"/>
<input type="text" name="cp" id="cp" placeholder="code postal" readonly="readonly" />
<input type="text" name="dept" id="dept" placeholder="département" readonly="readonly" />
<input type="text" name="region" id="region" placeholder="région" readonly="readonly" />
<input type="text" name="pays" id="pays" placeholder="pays" readonly="readonly" />
<div id="ma_carte2" class="carte"></div>

le champs « addresspicker » renverra les propositions d’adresses fournit par google lorsqu’on commencera à inscrire des caractères dedans. Pour faire fonctionner tout ça je vous propose le code javascript suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
//fonction appelé plus bas, ouvre un marqueur et recadre la carte aux coordonnées indiquées pour la cartes donnée
function traiteAdresse(marker, latLng, infowindow, map){
    //recadre et zomme sur les coordonnées latLng
    map.setCenter(latLng);
    map.setZoom(17);
    //on stocke nos nouvelles coordonée dans le champs correspondant
    document.getElementById('latlng').value=latLng;
    //on va rechercher les information sur l'adresse correspondant à ces coordonnées
    geocoder.geocode({
        'latLng': latLng
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                infowindow.setContent(results[0].formatted_address);
                //on stocke l'adresse complète
                document.getElementById("adressgmap").value=results[0].formatted_address;
                var nb_el=results[0].address_components.length;
                //et ses différentes composantes séparément
                for(var i=0;i<nb_el;i++){
                    if(results[0].address_components[i].types[0]=='route'){
                        document.getElementById("rue").value=results[0].address_components[i].long_name;//rue
                    }
                    if(results[0].address_components[i].types[0]=='locality'){
                        document.getElementById("ville").value=results[0].address_components[i].long_name;//ville
                    }
                    if(results[0].address_components[i].types[0]=='administrative_area_level_2'){
                        document.getElementById("dept").value=results[0].address_components[i].long_name;//dept
                    }
                    if(results[0].address_components[i].types[0]=='administrative_area_level_1'){
                        document.getElementById("region").value=results[0].address_components[i].long_name;//region
                    }
                    if(results[0].address_components[i].types[0]=='country'){
                        document.getElementById("pays").value=results[0].address_components[i].long_name;//pays
                    }
                    if(results[0].address_components[i].types[0]=='postal_code'){
                        document.getElementById("cp").value=results[0].address_components[i].long_name;//cp
                    }
                }
                infowindow.open(map, marker);
            } else {
                alert("No results found");
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}
//fonction initialisant la carte    
function initialize(zoom, carte) {
    geocoder = new google.maps.Geocoder();
    //par défaut on prend les coordonnées entré dans notre champs latlng
    var latlongdef= document.getElementById('latlng').value;
    latlongdef=latlongdef.split(",");
    var latlng = new google.maps.LatLng(latlongdef[0],latlongdef[1]);
    //on initialise notre carte
    var options = {
        center: latlng,
        zoom: zoom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById(carte), options);
    //on indique que notre champ addresspicker doit proposer les adresses existantes
    var input = document.getElementById('addresspicker');
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    //mise en place du marqueur
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: map
    });
    //déplacable
    marker.setDraggable(true);
    marker.setPosition(latlng);
    //quand on relache notre marqueur on réinitialise la carte avec les nouvelle coordonnées
    google.maps.event.addListener(marker, 'dragend', function(event) {
        traiteAdresse(marker, event.latLng, infowindow, map);
    });
   
    //quand on choisie une adresse proposée on réinitialise la carte avec les nouvelles coordonnées
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        marker.setPosition(place.geometry.location);
        traiteAdresse(marker, place.geometry.location, infowindow, map);
    });
}

Ca c’est fait ! on peux ainsi aisément enregistrer nos données dans une base afin de les réutiliser plus tard.

l’API permet aussi de changer le styles des cartes (couleurs, éléments à afficher etc…), google propose d’ailleurs un outil pour faire cela visuellement. Juste pour le fun donc, un petit exemple à ma sauce

Changer le style d’une carte google map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
function initialize(lat, lng, carte) {

    var styles = [
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [ {
            "visibility": "on"
        }, {
            "color": "#286496"
        } ]
    },
{
        "featureType": "road",
        "stylers": [ {
            "visibility": "off"
        } ]
    },
{
        "featureType": "landscape",
        "stylers": [ {
            "visibility": "off"
        } ]
    },
{
        "featureType": "administrative.locality",
        "elementType": "labels",
        "stylers": [ {
            "visibility": "simplified"
        }, {
            "color": "#c80000"
        } ]
    },
{
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [ {
            "visibility": "on"
        }, {
            "weight": 0.1
        }, {
            "color": "#009600"
        } ]
    },
{
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [ {
            "visibility": "on"
        }, {
            "color": "#c8c8c8"
        } ]
    } ]

    var styledMap = new google.maps.StyledMapType(styles,
    {
        name: "Mon style"
    });

    var mapOptions = {
        zoom: 7,
        center: new google.maps.LatLng(lat, lng),
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    var map = new google.maps.Map(document.getElementById(carte),
        mapOptions);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
}

Ce sera tout !

22 octobre
Catégorie(s) : Développement, jQuery
0

Faire un slider simplement avec jQuery

Vous pouvez voir une démo du slider que l’on va obtenir.

Tout d’abord posons les bases de notre page html, rien de particulier, elle comprend le bloc contenant le slider, les boutons gauche et droite du slider ainsi que le bloc à « slider » et ses différents éléments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="all">
<div class="slider_zone roundBt slide">
   <div class="bt_slide prev" data-on=".slider_zone .in"></div>
   <div class="bt_slide next" data-on=".slider_zone .in"></div>
      <div class="in" data-nb="7">
         <div class="bloc">1</div>
         <div class="bloc">2</div>
         <div class="bloc">3</div>
         <div class="bloc">4</div>
         <div class="bloc">5</div>
         <div class="bloc">6</div>
         <div class="bloc">7</div>
      </div>
   </div>
</div>

Nous avons simplement ajouter aux boutons du slider les attributs « data-on » indiquant quel élément les boutons doivent déplacer, ainsi que l’attribut « data-nb » qui nous permettra de connaitre le nombre d’éléments dans notre slider (ici 7), on aurait pu directement compter ces élément en javascript)

On met tout ca en page avec du css avant de nous occuper de la partie javascript pour l’animation.

1
2
3
4
5
6
#all{margin:auto;width:965px;background: #fff;padding:30px;border:1px solid #000;}
.slider_zone{overflow: hidden;position:relative;border:1px solid #ff1100;z-index:2;}
.bt_slide{background: url("./img/slider1_picto_prev.png") no-repeat center center #CBC9C9;cursor: pointer;height: 80px;width: 15px;float:left;}
.bt_slide.next{background: url("./img/slider1_picto_next.png") no-repeat center center #CBC9C9;float:right;}
.slider_zone .in {padding: 10px;padding-left:20px;position: absolute;width: 15000px;z-index: -1;}
.slider_zone .bloc{margin-right: 10px;width: 455px;float:left;height:60px;background: #dedede;}

On passe au principal, on inclut jQuery, et on code le déplacement de notre slider en utilisant les attributs data ajoutés au html. Le code commenté ci dessous.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//variable utilisé pour ne pas dépasser les limite du slider quand il n'y'a plus d'éléments
var decalage=0;
//au clic sur le bouton suivant
$(document).on("click", ".bt_slide.next", function(){
   //on stocke l'élément à déplacer
   var on=$(this).attr("data-on");
   //ainsi que le nombre d'éléments du slider
   var nb=$(on).attr("data-nb");
   //on calcule la taille d'un élément plus sa marge pour savoir de combien décaler le slider
   var taille=$(on+" .bloc").width();
   taille+=parseInt($(on+" .bloc").css("margin-right"));
   //nombre d'élément à ne pas dépasser (total d'élément moins nombre visible)
   var max=nb-2;
   //si on est pas au bout du slider, on décale de 'taille'
   if(decalage<max){
      decalage++;
      $(on).animate({left: '-='+taille+'px'},{duration : 300});
   }
});
//idem pour le bouton précédent
$(document).on("click", ".bt_slide.prev", function(){
   var on=$(this).attr("data-on");
   var taille=$(on+" .bloc").width();
   taille+=parseInt($(on+" .bloc").css("margin-right"));
   if(decalage>0){
      decalage--;
      $(on).animate({left: '+='+taille+'px'},{duration : 300});
   }
});

c’est court et ça fonctionne bien !

16 octobre
Catégorie(s) : Développement, PHP, SQL
0

Système de pagination en PHP sur une requête Mysql

Petit mémo pour un système de pagination simple en php/sql.
- garde les paramètres (get) de l’url et remplace simplement le paramètre num_page pour que les pages précédentes/suivantes conviennent.
- affiche un résultat de type << .  5 . 6 . 7 . >>, 6 étant la page actuelle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//nombres d'éléments à afficher par page
$nb_par_page = 5;
//requête récupérant le nombre total d'éléments
$count = "SELECT COUNT(*) FROM ma_table_delements WHERE mes_conditions='oui' ";
$result_count = mysql_query($count);
list($nb_resultats) = mysql_fetch_row($result_count);
//calcul du nombre de page à afficher
$max_page = $nb_resultats / $nb_par_page;
$max_page = ceil($max_page);
//calcul de la limite sql par rapport au numéro de la page et au nombres d'éléments à afficher
if (isset($num_page) && $num_page > 1) {
   if($num_page>$max_page){
      $num_page=$max_page;
   }
   $limit = ($num_page * $nb_par_page) - $nb_par_page;
} else {
   $num_page = 1;
   $limit = 0;
}
//calcul de la pagination à afficher
$pagination = '';
//on récupère l’URL complet
$lien = $_SERVER['REQUEST_URI'];
//on supprime notre parametre num_page, pour pouvoir le rajouter modifier par la suite
$lien = preg_replace("#&num_page=[0-9]+#i", "", $lien);
//première page
if ($num_page - 1 > 1) {
   $pagination.='<a href="' . $lien . '&num_page=1"><<</a> . ';
}
//page precedente
$prev = $num_page - 1;
if ($prev != $num_page && $prev > 0) {
   $pagination.='<a href="' . $lien . '&num_page=' . $prev . '">' . $prev . '</a> . ';
}
//page_actuelle
$pagination.=$num_page . ' ';
//page suivante
if ($max_page > $num_page) {
   $next = $num_page + 1;
   $pagination.='. <a href="' . $lien . '&num_page=' . $next . '">' . $next . '</a> ';
}
//dernière page
if ($num_page + 1 > $max_page) {
   $pagination.='. <a href="' . $lien . '&num_page=' . $max_page . '">>></a>';
}
$data['pagination'] = $pagination;
//requete récupérant les éléments correspondant à la page actuelle
$select = "SELECT * FROM ma_table_delements WHERE mes_conditions='oui' LIMIT " . $limit . ", " . $nb_par_page . "";

//afficher les résultats de la requête
//afficher $pagination
12 octobre
Catégorie(s) : Musique, Punchline, Vidéos
0

Les grots mots de Greg Frite

Greg frite (Triptik) nous explique des mots en musique et en flow !

10 octobre
Catégorie(s) : Développement, SQL
0

Trouver les éléments à proximité sous MySql via leurs longitude et latitude

La formule et la requête permettant de classer par distances les villes les plus proche d’un point donnée à partir de leurs coordonnées géographique (latitude et longitude)

Dans un script PHP :

1
2
3
4
5
6
7
8
9
10
11
//description des variables
//$latitude = la latitude du point à comparer : ex 43.6020984
//$longitude = la longitude du point à comparer : ex 3.894896900000049
//$distance = la distance en km à ne pas dépasser, ici on recherche toute les villes à moins de 5 km de notre point de départ.

$formule = "(6366*acos(cos(radians(" . $latitude . "))*cos(radians(lat))*cos(radians(lng)-radians(" . $longitude . "))+sin(radians(" . $latitude . "))*sin(radians(lat))))";
$select = "SELECT titre, id," . $formule . " AS proximite
           FROM _ma_table_
           WHERE " . $formule . " ORDER BY proximite";

//exécuter la requête !

source

8 octobre
Catégorie(s) : Vidéos
0

Expérience de vol avec les oiseaux sur ces belles vidéos

Un réalisateur à eu l’idée de fixer des caméras sur des oiseaux pour avoir des images intéressantes, les manières de filmer plus classique de ses séquences donnent également un beau résultat :


Sources :

www.lemonde.fr/planete/video/2012/10/08/fixees-sur-des-oiseaux-de-petites-cameras-montrent-a-quoi-ressemble-la-vie-en-l-air_1771829_3244.html
http://www.wanderlust.co.uk/magazine/articles/interviews/john-downer-making-earthflight?page=all

7 octobre
Catégorie(s) : Développement, Wordpress
0

Installer un plugin de coloration syntaxique pour le code sous wordpress

Pour avoir une jolie présentation de code sous wordpress il faut installer le plugin codecolorer.

Pour l’utiliser il suffit dans les articles de mettre l’éditeur en mode HTML et d’insérer les balises suivante autour de son code :


[cc lang=’nom_du_langage’]
le code
[/cc]

7 octobre
Catégorie(s) : Développement, SQL
0

Convertir une table MySql au format UTF8 pour accepter tous les caractères spéciaux

1
ALTER TABLE ma_table CONVERT TO CHARACTER SET utf8;
7 octobre
Catégorie(s) : Musique, Punchline
0

On est toujours les mêmes, dis toi qu’on va jamais changer : Vivant on fout la merde et mort on fait de l’engrais.

« Taipan – C’est beau de réver »