Catégorie : Langages Web

langages Web

  • Calculatrice d’abonnement dynamique

    Suite à mon article sur Leaflet et a la création de cercle dynamique, j’ai décidé de partager avec vous un autre de mes scripts.

    C’est une petite fonctionnalité qui permet de calculer dynamiquement des abonnements, à partir de 2 paramètres :

    • le type d’abonnement (annuel ou mensuel), avec son tarif
    • Le nombre d’abonnements choisi.

    C’est une petite fonctionnalité que j’ai pu développer en peu de temps, et qui est facile à faire évoluer.
    Les seules dépendances sont bootstrap 4, et Jquery 3.

    Il suffit juste de choisir le type d’abonnement que vous souhaitez, et un nombre d’utilisateurs, et la calculatrice donnera directement le résultat.

    Voici ce que donne le visuel :

    Calculatrice d'abonnement dynamique.

    Dites-moi ce que vous en pensez !

  • Cercle dynamique dans Leaflet

    Créer un cercle dynamique dans Leaflet
    Marker & circle in Leaflet

    Aujourd’hui, je continue ma lancée dans le partage de code, mais avec une petite différence. Le code d’aujourd’hui ne contiendra pas de PHP, mais du JavaScript.

    Vous pouvez retrouver ce code sur codepen, sous le titre Dynamical circle in leaflet.

    Comme vous pouvez le voir dans cette exemple codepen, j’ai fait en sorte de relier deux champs d’un formulaire avec une forme géométrique d’une carte Leaflet (un cercle, dans mon exemple).

    Il faut prendre en compte que ces 2 mêmes champs sont aussi relié entre eux. Si l’un des deux change, le deuxième change à la volée. Ils sont limité tous les 2 entre les valeurs 0 et 100.
    Le cercle se modifiant en direct, dès que la valeur des champs input change.

    J’ai fait en sorte que le code soit le plus simple possible. On peu le faire évoluer rapidement et facilement.

    Les dépendances CSS/JS de ce code sont : Bootstrap (3 ou 4), Jquery 3.5, et Leaflet 1.7.1
    Il est possible de s’abstraire de Bootstrap et Jquery, en faisant quelques modifications dans le HTML et le Javascript.
    Par contre, il est obligatoire d’utiliser les dépendances CSS et JS de Leaflet, pour la carte.

    Qu’en pensez-vous ?

  • Comment insérer un élément au milieu d’un tableau PHP ?

    Comment insérer un élément au milieu d’un tableau PHP ?

    Lors d’une demande de développement PHP, je devais créer une fonction qui répondait à la question suivante :

    Comment insérer un élément au milieu d’un tableau ?

    Je n’ai pas trouvé de fonction PHP spécifique à cette demande.
    Par contre, j’ai découvert une réponse qui me permettrai de créer une fonction de ce genre.
    Le code est le suivant :

    //Soit le tableau contenant pomme, poire, pêche, kiwi. On veut insérer abricot au milieu de ce tableau
    $tab = array ("pomme", "poire", "pêche", "kiwi");
    $tab1 = array_slice ($tab, 0, 2); //Récupère pomme et poire
    $tab2 = array_slice ($tab, 2); //Récupère tous les éléments à partir de l'indice 2
    array_push ($tab1, "abricot"); //Ajoute à la fin du tableau l'élément abricot
    $tab = array_merge ($tab1, $tab2); //Fusionne les deux tableaux
    echo '<pre>'; print_r($tab); echo '</pre>';

    Pour expliquer le code en quelques mots

    • on extrait une (ou plusieurs) portion(s) du tableau avec array_slice().
    • On empile un ou plusieurs éléments à la fin d’un tableau avec array_push()
    • On fusionne un ou plusieurs tableaux avec array_merge().

    Cela affiche le tableau suivant :

    Array([0] => pomme [1] => poire [2] => abricot [3] => pêche [4] => kiwi)

    Voici ce que redonne le même code ci-dessus, mais factoriser dans une fonction.

    function add_middle($tab, $add_element, $indice_tab) {
        $tab1 = array_slice ($tab, 0, $indice_tab);
        $tab2 = array_slice ($tab, $indice_tab);
        array_push ($tab1, $add_element);
        $tab = array_merge ($tab1, $tab2); //Fusionne les deux tableaux
    
        return $tab;
    }
    
    //Soit le tableau contenant pomme, poire, pêche, kiwi.
    // On veut insérer abricot au milieu de ce tableau
    $tab = array ("pomme", "poire", "pêche", "kiwi");
    $add_element = 'abricot';
    
    $tab = function add_middle($tab, 'abricot', 2);
    
    echo '<pre>'; print_r($tab); echo '</pre>';

    Que pensez-vous de cette technique ? Et connaissez-vous des fonctions natives permettant de faire ce genre de chose ?
    N’hésitez pas à venir le partager avec moi.

    PS : Quelques heures après la parution de cet article, Frédéric Bouchery me proposait une solution avec une fonction native en PHP. Je peux le remercier.
    Voici cette solution :

    <?php
    $array = ['pomme', 'poire', 'pêche', 'kiwi'];
    array_splice($array, 2, 0, ['abricot']);
    print_r($array);
    
    Array
    (
        [0] => pomme
        [1] => poire
        [2] => abricot
        [3] => pêche
        [4] => kiwi
    )
  • Comment permuter des variables en PHP

    Poème PHP :
    All PHP programmers should know …

    Après avoir lu un petit article sur le swapping de variable en JS, je me suis dis que je pouvais transposer l’idée pour le PHP.

    Dans beaucoup de situation, les développeurs auront la nécessité d’échanger 2 variables. Je pense qu’il est obligatoire de connaître plusieurs façons d’effectuer l’échange de variables.

    Variable temporaire

    L’échange de 2 variables à l’aide d’une 3eme variable temporaire est classique. Comme son nom l’indique, cette approche nécessite d’échanger les valeurs des variables $a et $b à l’aide d’une variable temporaire $temp :

    $a = 10;
    $b = 20;
    $temp;
    
    $temp = $a;
    $a = $b;
    $b = $temp;
    
    // Résultat
    echo $a; // => 20
    echo $b; // => 10

    Assignement par restructuration

    La méthode que je vais montrer n’est valable qu’à partir de la version 7.1 de PHP. Elle ne fonctionne absolument pas avec les versions antérieures.

    Notez-le de votre côté !

    $a = 10;
    $b = 20;
    
    [$a, $b] = [$b, $a];
    
    echo $a; // => 20
    echo $b; // => 10

    Comme vous pouvez le constater, cette technique est plus rapide, et n’a aucunement besoin d’une troisième variable.
    La ligne [$a, $b] = [$b, $a]; permet de switcher les variables que vous souhaitez, dans l’ordre que vous souhaitez.
    Cette technique est même fonctionnelle avec autant de variables que vous souhaitez :

    $a = 10;
    $b = 20;
    $c = 30;
    
    [$a, $b, $c] = [$b, $c, $a];
    
    echo $a; // => 20
    echo $b; // => 30
    echo $c; // => 10

    Addition et différence

    Cette technique échange des variables sans utiliser de mémoire supplémentaire.

    Vous l’aurez compris, l’exemple suivant permute les variables $a et b à l’aide des opérateurs arithmétiques d’addition et de soustraction :

    $a = 10;
    $b = 20;
    
    $a = $a + $b;
    $b = $a - $b;
    $a = $a - $b;
    
    echo $a; // 20
    echo $b; // 10

    Initialement, $a vaut 10 et $b vaut 20. Voici l’explication des 3 instructions :

    $a = $a + $b attribue à $a la valeur 10 + 20.
    $b = $a - $b attribue à $b la valeur 10+20-20 = 10.
    $a = $a - $b attribue à $a la valeur 10+20-10 = 20.

    Enfin, $a vaut 20 et $b vaut 10. L’échange de $a et $b a été effectué.

    Bien que cette approche n’utilise pas de variables temporaires, elle présente des limites considérables :
    – Tout d’abord, vous ne pouvez échanger que des entiers.
    – Deuxièmement, soyez conscient du débordement des nombres lorsque vous effectuez l’addition à la première étape $a = $a + $b.


    Si vous connaissez d’autres algorithmes, simple ou complexe, qui permettent la permutation de variables en PHP, n’hésitez pas à les partager. Je les ajouterai à cette article.

  • 25 jours d’autoformation au motion design CSS

    25 jours d'autoformation au motion design CSS
    25 jours d’autoformation au motion design CSS

    Aujourd’hui, je voudrais partager avec vous l’article suivant : 25 Days of CSS Animations: Teaching Myself CSS through Motion Design.

    Dans cet article, il y a tout un process pour apprendre le motion design en CSS, quelques liens de tutoriel, et aussi des exemples d’animations.

    Je le partage avec vous.