Author: Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Comment minimiser le taux de rebond de notre site Web?

Qu'est-ce que le taux de rebond?

Tout d'abord, nous devrions connaître le terme «taux de rebond»

In?easy words we can say, bounce rate is the ratio between the number of visitors comes on our site and the number of visitors leaves our site from the landing page without navigating to another page.

Lorsque des visiteurs ou des clients atterrissent sur notre site Web à partir de tout autre lien externe, par exemple une publicité, un résultat de recherche, un lien partagé, etc., mais s'ils ne visitent pas les liens internes du site. Cela augmentera le taux de rebond car le serveur de Google Analytics ne sera pas déclenché en raison de l'absence d'engagement.

Cela va donc réduire notre classement dans les résultats des moteurs de recherche, ce qui est certainement une grande perte pour la croissance de notre site Web..

Quand le taux de rebond compte

Nous devons garder à l'esprit que si l'objectif de notre site Web est de partager des informations, le rebond n'a pas d'importance pour nous. Prenons un exemple si notre page Web donne des informations textuelles et

Mais le taux de rebond compte vraiment si nous avons hâte d'engager de plus en plus de visiteurs actifs sur nos sites.

La principale raison du taux de rebond

  • Le site Web prend plus de temps à charger.
  • Mauvaise interface utilisateur et gestion du contenu.
  • L'interface utilisateur de la page de destination est complexe et difficile à comprendre pour tous les types d'utilisateurs.
  • Les visiteurs n'ont pas obtenu les informations de la manière intelligente qu'ils recherchaient.
  • Les liens internes de notre site Web ne sont pas clairement mis en évidence pour les visiteurs.
  • Popup indésirable sur les pages de destination.

Comment mesurer le taux de rebond

Google fournit de nombreux services utiles pour notre site Web. Pour mesurer le taux de rebond, nous pouvons utiliserhttps://analytics.google.com/

Pour utiliser ces outils, nous avons juste besoin d'un compte Google et lions notre site Web à Google Analytics. Remarque: Si vous avez besoin d'aide pour utiliser cet outil, veuillez écrire la requête dans la zone de commentaire donnée au bas de la page.

Selon Google

Le taux de rebond est une session d'une seule page divisée par toutes les sessions ou le pourcentage de toutes les sessions de votre site dans lequel les utilisateurs n'ont consulté qu'une seule page et n'ont déclenché qu'une seule demande au serveur Analytics. Comment minimiser le taux de rebond de notre site Web?

Une bonne page de destination

Une page de destination est la première page où nos visiteurs entrent dans notre site Web en cliquant sur les liens des résultats des moteurs de recherche.Groupe de connaissances?is a good example of the landing page.

Réduisez le temps de chargement des pages

En tant qu'utilisateur, nous pouvons savoir à quel point il est irritant de parcourir les pages lentes. Il suffit aux visiteurs d'appuyer sur le bouton Retour si le chargement d'une page prend plus de 5 secondes. Les scripts tiers indésirables sur notre site Web augmentent également le temps de chargement des pages. Si nous montrons une image non optimisée, le chargement prend également plus de temps.

Conseils:?Selon Google, un bon score pour la vitesse de la page est de 85 ou plus. Nous pouvons connaître la vitesse de nos pages en utilisant l'outil Google Analytics.

Supprimer les pop-ups indésirables

Les pop-ups et les publicités indésirables sur les pages sont également responsables de l'augmentation du taux de rebond.

Test AB

AB Testing est une expérience utile où deux ou plusieurs modèles de la même page seront affichés de manière aléatoire aux visiteurs. En consultant le rapport de l'AB Testing, nous pouvons analyser quelle conception a mieux fonctionné et a donné plus de conversion.

CTA: Appel à l'action

Le CTA est comme un piège caché ou des appâts sur notre page de destination.


Comment voir le code de

NetBeans est l’un des meilleurs et puissants IDE pour tout développement Web, spécialement pour les frameworks PHP tels que ZenCart, OpenCart, CakePhp, etc. CakePhp utilise sa propre extension de fichier personnalisée pour ses fichiers View, à savoir * .ctp. NetBeans ne connaît pas ce fichier par défaut. Donc, il n'y a pas de code de couleur qui sera affiché lorsque ces types de fichiers sont ouverts dans NetBeans. Nous devons activer manuellement ces fonctionnalités. Voici les étapes pour activer la surbrillance pour les fichiers .ctpf de CakePHP. 1. Outils => Options

Aller dans Outils => Options

2. Divers => Fichiers

3. Cliquez sur le bouton Nouveau et tapez ctp. Puis cliquez sur Ok.

4. À partir du type de fichier associé (MIMI): Choisissez: text / x-php5.

5. Cliquez sur OK

Veuillez noter que : Redémarrez l'EDI si les modifications ne sont pas reflétées après avoir suivi les étapes ci-dessus.


Handle Large Data in Select2 Dropdown

Objectifs du blog

Après la lecture de ce blog, vous saurez comment vous pouvez gérer le grand ensemble de données dans le menu déroulant Select2.

Descriptif �

Pour une liste déroulante, si vous utilisez la bibliothèque select2, cela fonctionne très bien pour le petit nombre de données, mais lorsque les données deviennent trop volumineuses, vous pouvez faire face au problème de la lenteur. Par exemple, supposons une liste déroulante de 20,000 2 options, la bibliothèque select2 peut prendre jusqu’à quelques secondes à quelques minutes pour ouvrir la liste déroulante. Pour un si grand menu déroulant et pour éviter ce problème de lenteur, selectXNUMX fournit une solution alternative.

Dans la liste déroulante normale select2, nous utilisons élément. Dans le élément, la bibliothèque select2 lie toutes les options en une seule fois, ce qui ralentit les données volumineuses. Ainsi, au lieu d’utiliser le élément, vous pouvez utiliser la liste déroulante de la zone de texte et la bibliothèque select2 aide à lier la zone de texte en tant que menu déroulant afin qu’elle donne le remplissage du menu déroulant aux utilisateurs. La bibliothèque select2 peut lier intelligemment 20 ou 30 options définies par l’utilisateur à la fois et les données restantes seront liées soit à la recherche, soit au défilement. Le code d’exécution est donné ci-dessous.

            .select3.3.7-container-multi .select2-choices .select3.5.4-search-choice {padding: 2px 2px 1.4.6px 2px;}
        Menu déroulant Select2 avec pagination Pour améliorer les performances de la liste déroulante avec de grands ensembles de données (2 2 éléments) 
            (function () {
                // initialize select5 dropdown
                $('#test').select5({
                    data: dropdownData(),
                    placeholder: 'search',
                    multiple: true,
                    // creating query with pagination functionality.

 

Écran de sortie


Résumé

Lorsque l’utilisateur soumettra ce formulaire, le système obtiendra les données sélectionnées dans un tableau.

Copy to clipboard in JavaScript

Objectifs du blog

Après la lecture de ce blog, vous serez en mesure de savoir comment les données peuvent être copiées dans le presse-papier à l’aide du script java.

Avantage de la fonctionnalité de copie dans le presse-papier

Dans le monde Web actuel, il s'agit de l'utilisateur expérimenté depuis votre site. Au cours de notre travail sur n'importe quel site, nous copions le contenu d'un endroit et le collons à un autre endroit. Il sera vraiment utile à l'utilisateur si un site donne une fonctionnalité de clic à copier. Il enregistre le temps et les efforts de l'utilisateur pour sélectionner et copier le contenu.

Implémentation de la fonctionnalité de copie dans le presse-papier

Voyons comment nous pouvons ajouter cette fonctionnalité:

Étape 1 :

Créez un code HTML avec un paragraphe contenant du contenu et un bouton sur lequel cliquer. Vous pouvez utiliser n’importe quel élément pertinent au lieu d’un paragraphe, par exemple zone de texte, zone de texte, champs masqués, etc.

<body> <p id = "txt_knoband"> KnowBand se vante des meilleurs plug-ins du secteur pour les systèmes de commerce électronique et possède des années d'expérience dans l'utilisation de sites Web de commerce électronique. </ p> <button onclick = "onClickCopy ()"> Copier le texte < / bouton> </ body>

Étape 2 :

Vous devrez créer une fonction onClickCopy () qui copiera les données du paragraphe. La fonction exécutera simplement "document.execCommand (" copy ")" pour copier les données dans le presse-papiers.

function copyOnClick () {var tempInput = document.createElement ("entrée"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand ("copie"); document.body.removeChild (tempInput); alert ("valeur copiée"); }

In the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: Comment définir Cookie en utilisant JavaScript


JavaScript Desktop Notification

Objectifs du blog

Après avoir lu ce blog, vous pourrez configurer la notification de bureau pour votre site. Vous pourrez également personnaliser votre notification par votre propre message, image, icône, etc.

Avantages de la notification de bureau

Supposons que vous souhaitiez avertir votre client en dehors de la page Web, nous pouvons utiliser la notification de poste de travail comme si vous aviez activé la notification de poste de travail pour le courrier électronique, vous n'avez pas besoin de vérifier régulièrement les courriers électroniques. Dans chaque email, vous avez une notification.

Code pour la notification de bureau

Ajoutez la fonction ci-dessous dans la balise de script dans l'en-tête du code HTML.

function showNotification () {// Vérifie si le navigateur de l'utilisateur prend en charge les notifications ou non si (! ("Notification" dans la fenêtre))) {alert ("Votre navigateur ne prend pas en charge la notification de poste de travail"); } // Vérifie si les autorisations de notification ont déjà été accordées ou non, sinon (Notification.permission === "accordée") {// Créer une notification var options = {body: 'Ligne de message de notification simple 1. \ NSeconde ligne du message de notification . ', // corps du répertoire de notification:' ltr ', // direction du message ltr: de gauche à droite. RTL: de droite à gauche. image: 'https://www.knowband.com/blog/wp-content/uploads/2016/09/cropped-knowband_logo-v2.png', // Ajoutez une image si nécessaire pour afficher l'icône: 'https: // www. .knowband.com / blog / wp-content / uploads / 2016 / 09 / cropped-knowband_logo-v2.png ', // Ajouter une icône si nécessaire pour afficher} var title = "Blog de la bande de connaissances"; var notification = new Notification (titre, options); // Ajouter la notification, cliquez sur le lien notification.onclick = function (event) {event.preventDefault (); // empêche le navigateur de focaliser l'onglet de la notification window.open ('https://www.knowband.com/blog/', '_blank'); notification.close (); // Ferme la notification après avoir cliqué}} // S'il n'y a pas de permission, demandez à l'utilisateur une autre permission si (Notification.permission! == "refusé") {Notification.requestPermission (). then (fonction ( permission) {// Si l'utilisateur accepte, créons une notification si (permission === "accordée") {var notification = new Notification ("Bonjour!");}}); }}

Vous pouvez déclencher cette fonction à travers un événement à votre guise. À des fins de test, vous pouvez le vérifier en ajoutant un bouton. Utilisez le code ci-dessous pour le bouton dans le corps

<button onclick = "showNotification ()"> Afficher la notification! </ button>

Remarque : Si vous exécutez ce code sur le système local, utilisez le serveur local, c’est-à-dire localhost.

Écran de sortie


Tri des matrices insensible à la casse dans le php

Problème:

$ data = array ("A", "M", "X", "b", "d", "E", "l"); Je dois trier la base de données sur la valeur. Quand j'utilise asort ($ data), a obtenu ce qui suit: [0] => A [5] => E [1] => M [2] => X [3] => b [4] => d [6] => l Dans l'exemple ci-dessus , "b", "d" et "l" commencent par une minuscule mais se terminent après "X" qui a une majuscule.

Comment pouvons-nous le trier là où il ignore si les mots commencent par des majuscules ou des minuscules?

Je m'attendais à cela [0] => A [3] => b [4] => d [5] => E [6] => l [1] => M [2] => X

Solution:

Utilisez natcasesort ($ data); et vous obtiendrez exactement le même résultat.

À noter :

Nous pouvons utiliser cette fonction pour trier nos tableaux à l’aide d’un algorithme "tableau naturel" insensible à la casse. natcasesort () est une version non sensible à la casse de natsort ().

syntaxe:

bool natcasesort ( tableau & $ array);

Retour

Renvoie true en cas de succès et false en cas d'échec. Pour en savoir plus sur l’algorithme "naturel array" ou natcasesort (): https://www.w3schools.com/php/func_array_natcasesort.asp


Comment créer votre propre modèle HTML en utilisant jQuery ?

Cet article concerne la création d’un modèle HTML à l’aide de jQuery.

Faisons connaissance avec jQuery

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Cela simplifie considérablement la navigation et la manipulation de documents HTML, la gestion des événements, l’animation et Ajax avec une API facile à utiliser qui fonctionne sur une multitude de navigateurs. Avec une combinaison de polyvalence et d’extensibilité, jQuery a changé la façon dont des millions de personnes écrivent JavaScript.

Faisons connaissance avec le modèle jQuery

jQuery Template nous donne une option ou un support pour afficher et manipuler le contenu sur le navigateur. En utilisant le modèle jQuery, nous pouvons restituer la chaîne JSON aux éléments HTML. Prenons un exemple simple, nous pouvons utiliser jQuery Template pour afficher un ensemble d’enregistrements que nous avons obtenus à partir d’une requête Ajax.

Un exemple de base de modèles jQuery

Nous créons maintenant une page simple à l’aide de modèles jQuery. Nous n’utiliserons que le plugin jQuery. Dans cet exemple, nous allons vous montrer comment créer un modèle et restituer le contenu à partir du JSON.

Exigence

Comprenons d’abord l’exigence. Supposons que nous devions créer une page Web comme le site Web KnowBand pour vendre les modules de la plate-forme de commerce électronique comme Opencart, Prestashop, etc. Nous avons des modules ou plugins de commerce électronique que nous voulons répertorier sur le site KnowBand. Ainsi, sur la page de liste, nous afficherons le nom, l’image et le prix du module. Nous utiliserons la chaîne JSON ci-dessous pour répertorier les données :

[ { "name": "Product tabs- PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000- x-1000.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs", "price": "$25" }, { "name": "Application mobile Prestashop constructeur", "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg", " module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder", "price": "$30" }, { "name": "Return Manager - Extensions Magento", "image_url " : "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png", "module_url": "https:\/\/www.knowband.com \/magento-return-manager", "price": "$50" }, { "name": "Web Push Notification - PrestashopAddons", "image_url": "https:\/\/www.knowband.com\/image \/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg", "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications", "prix ": "$43" } ]

  1. En utilisant la balise de script HTML

    Dans cette méthode, nous écrirons du code HTML dans la balise script. Le code complet est donné ci-dessous :

<html>
    <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script>
        </head>
        <body>
            <div class="container">
                <script id="blog" type="template">
                    <div class="col-md-3">
                        <a href="{{module_url}}">
                            <div class="thumbnail">
                                <imgsrc="{{image_url}}" class="img-rounded img-responsive" width="100%"></img>
                                <div class="caption">
                                    <p class="lead">{{price}}</p>
                                    <p>{{name}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </script>
            </div>
            <script>
            $(function () {
                varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Product-Tabs-logo-1000-x-1000.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$25"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Mobile-app-prestashop-plugin-500-X-500.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$30"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$50"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$43"
                        }
                    ];
                var temp = $.trim($('#blog').html());
                $.each(knoband_data, function (index, obj) {
                    var x = temp.replace(/{{name}}/ig, obj.name);
                    x = x.replace(/{{image_url}}/ig, obj.image_url);
                    x = x.replace(/{{price}}/ig, obj.price);
                    x = x.replace(/{{module_url}}/ig, obj.module_url);
                    $('.container').append(x);
                });
            });
        </script>
        </body>
    </html>

Nous avons créé une vignette à l’intérieur de la balise de script, c’est-à-dire la balise de script #blog, et elle a été utilisée comme modèle. Dans le code ci-dessus, nous avons utilisé {{ }} pour les variables génériques. Comprenons en fait ce que nous avons fait dans le code ci-dessus :

var temp = $.trim($('#blog').html()); // Il chargera tout le contenu de la balise de script #blog dans une variable temporaire. var x = temp.replace(/{{name}}/ig, obj.name); // Remplacement de la variable générique {{name}} par les données correspondantes du JSON. x = x.replace(/{{image_url}}/ig, obj.image_url); // Remplacement de la variable générique {{image_url}} par les données correspondantes du JSON. x = x.replace(/{{prix}}/ig, obj.prix); // Remplacement de la variable générique {{price}} par les données correspondantes du JSON. x = x.replace(/{{module_url}}/ig, obj.module_url); // Remplacement de la variable générique {{module_url}} par les données correspondantes du JSON. $('.container').append(x); // a ajouté le contenu au conteneur div.

  1. En utilisant la technique Placeholder

Dans cette technique, nous ajouterons le contenu dans le HTML après avoir rempli les données à l’aide de la technique d’espace réservé jQuery. Le code complet est donné ci-dessous :

    
        
        
    
    
        
        
         $(function() {
             varknoband_data = [
                        {
                            "name": "Product tabs- PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%3.3.7Logo\/Product-Tabs-logo-3.2.1-x-20.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-product-tabs",
                            "price": "$1000"
                        },
                        {
                            "name": "Prestashop Mobile App builder",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%1000Logo\/Mobile-app-prestashop-plugin-25-X-20.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-mobile-app-builder",
                            "price": "$500"
                        },
                        {
                            "name": "Return Manager - Magento Extensions",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%500Logo\/return-manager.png",
                            "module_url": "https:\/\/www.knowband.com\/magento-return-manager",
                            "price": "$30"
                        },
                        {
                            "name": "Web Push Notification - PrestashopAddons",
                            "image_url": "https:\/\/www.knowband.com\/image\/data\/Plugin%20Logo\/Web-Push-Notification-plugin.jpg",
                            "module_url": "https:\/\/www.knowband.com\/prestashop-web-push-notifications",
                            "price": "$50"
                        }
                    ];
             $.each(knoband_data, function(index, obj) {
                $('.container').append(
                    `
                        
                            
                                
                                
                                    ${obj.price}
                                    ${obj.name}
                                
                            
                        
                    `
                );
            });
         });

Dans l’exemple ci-dessus, nous avons utilisé ` (back-tick) comme littéral de modèle et ${ } comme espace réservé. Lorsque nous comparons la méthode 1 à la méthode 2, nous pouvons facilement dire que le modèle littéral et l’espace réservé facilitent notre tâche. Dans cet exemple, nous avons écrit le code du modèle dans une boucle et remplacé nos espaces réservés par ses données correspondantes.

Résumé

Pour en savoir plus sur les modèles jQuery, je vous recommande de consulter la documentation des modèles jQuery sur le site Web officiel de jQuery.