MICROsouffle

JS : Créer une modal d'erreur bootstrap réutilisable

30 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #Asp.net, #JavaScript

JS : Créer une modal d'erreur bootstrap réutilisable

Bonjour, suite au besoin d’une pop-up pour afficher les messages d’erreurs dans un site Asp.net MVC, j’ai créé un ensemble HTML/JS/CSS réutilisable.

Le model de la modal en elle-même est le schéma de base de bootstrap :

<div class="modal fade" id="modalErreur" role="dialog"> <div class="modal-dialog"> <!-- Modal erreur--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title" id="titreModalErreur"></h4> </div> <div class="modal-body"> <div id="textModalErreur" data-nomsecteur="" data-idajout=""> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button> </div> </div> </div> </div>

Ajoutez un style pour afficher le texte en rouge :

<style> #textModalErreur { color: darkred; font-weight: bold; } </style>

Créez une fonction JS* générique :

<script type="text/javascript"> function ModalErreur(titre, text) { document.getElementById("titreModalErreur").innerHTML = titre; document.getElementById("textModalErreur").innerHTML = text; $('#modalErreur').modal('show'); } </script>

Faites un appel à cette fonction JS* :

<script type="text/javascript"> ModalErreur("Erreur de création", "La création ... n'a pas fonctionnée."); </script>

A venir : Modal de confirmation (type suppression d'un élément) le plus générique possible.

Merci de votre visite et bon code.

JS : Créer une modal d'erreur bootstrap réutilisable
Lire la suite

PowerBi partie 3 : Créer un rapport

17 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #PowerBi

PowerBi partie 3 : Créer un rapport

Article en cours d'élaboration.

Merci de votre compréhension.

Antoine.

Lire la suite

PowerBi partie 2 : Importer des données et les nettoyer

16 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #PowerBi

PowerBi partie 2 : Importer des données et les nettoyer

Importation

Comme indiqué dans la partie 1, nous allons utiliser PowerBi desktop pour commencer. Une fois PowerBi lancé, vous arrivez sur la fenêtre d’accueil.

 

PowerBi partie 2 : Importer des données et les nettoyer

Cliquez sur obtenir des données. La fenêtre qui s’ouvre va vous permettre de choisir le type de source de données à utiliser (une fois la première source choisi, vous pourrez bien sûr en ajouter d’autre de formats différents).

PowerBi partie 2 : Importer des données et les nettoyer

Pour tester, je vous conseille d’utiliser un format type Excel qui sera simple à créer et à utiliser.

Voici mon fichier Excel (si vous souhaitez être sur la même base de données de départ que moi).

Mon exemple se base sur un chiffre d’affaire d’une boutique et sur le nombre de ventes par jour sur un mois. J’ai volontairement séparé les deux valeurs pour mettre en place des liens entre nos tableaux.

PowerBi partie 2 : Importer des données et les nettoyer

J’ai donc choisi le format Excel et j’ai sélectionné mon fichier exemple. Une fois fait, PowerBi repere les diffèrent tableaux disponible dans votre fichier. A vous de cocher ceux dont vous avez besoin. Dans notre cas nous prendrons les tableaux 1 et 2.

A ce moment-là, ne faites pas « charger » mais  « modifier » car cette action va vous permettre de nettoyer vos données. Par exemple nous allons pouvoir enlever les lignes à valeur nulles, retirer les colonnes qui ne nous intéresse pas, créer des liens entre les tableaux,....

 

Nettoyage des données

Vous arrivez sur une fenêtre qui vous permet de visualiser vos valeurs. A gauche se trouve la liste de vos différents tableaux. Au milieu s’affiche le contenu du tableau sélectionné et à droite le panneau de filtrage et modification de vos données.

Notez que toutes les modifications faites ici ne s’effectuent jamais sur vos données même. PowerBi va importer vos données et ensuite faire les tris.

PowerBi partie 2 : Importer des données et les nettoyer

Sur le tableau 1 nous allons enlever les lignes pour lesquelles le « CA » est null (ce sont les dimanche et il ne nous intéressent donc pas).

Sur une case « null » faite un clic droit => Filtre numérique => « n’est pas égal à ». Cette manipulation indique que l’on ne veut pas les lignes où « CA » est null (les dimanches).

PowerBi partie 2 : Importer des données et les nettoyer

Les ID ne nous intéresse pas. Nous allons donc sélectionner la colonne ID et choisir « supprimer les colonnes » dans l’onglet « Dossier racine » du bandeau supérieur.

PowerBi partie 2 : Importer des données et les nettoyer

Faites la même chose pour le tableau 2.

Voici le résultat :

PowerBi partie 2 : Importer des données et les nettoyer
PowerBi partie 2 : Importer des données et les nettoyer

Vérifiez le type des données du tableau : Clic droit sur le nom de la colonne puis « modifier le type ». Par défaut, PowerBi essai de mettre les bon type par lui-même.

PowerBi partie 2 : Importer des données et les nettoyer

Vous pouvez voir sur la droite que les modificateur appliqués sont visibles et surtout, qu’ils peuvent être supprimé. Si par la suite vous vous apercevez qu’il vous manque un filtre ou qu’au contraire une colonne supprimée doit être remise dans le tableau, vous pourrez revenir ici pour faire les changements. Ils ne sont pas définitifs.

Si vous avez fini de nettoyer votre source de données, il ne vous reste plus qu’à cliquer sur « Fermer & appliquer » dans le menu « Dossier racine » du ruban supérieur.

PowerBi partie 2 : Importer des données et les nettoyer

Une fois revenu sur l’interface de base de PowerBi, nous allons pouvoir ajouter une relation entre nos deux tableaux (sur la date). Cette relation va nous permettre de faire des rapprochements entre les valeurs de ceci.

Commencez par cliquer sur le bouton « Gérer les relations » du menu « Dossier racine » du ruban supérieur.

PowerBi partie 2 : Importer des données et les nettoyer

Cliquez sur « nouveau… »

PowerBi partie 2 : Importer des données et les nettoyer

Indiquez alors les deux tables à lier, puis cliquez sur les colonnes à lier.

PowerBi partie 2 : Importer des données et les nettoyer

Ensuite choisissez le type de relation et cliquez sur OK.

La relation est opérationnelle.

PowerBi partie 2 : Importer des données et les nettoyer

Vous vennez d'importer et nettoyer (de façon simple) des données dans PowerBi.

Je vous propose de continuer sur la mise en place d’une page de rapport qui nous servira à remplir notre dashboard. A tout de suite dans la Partie 3.

Lire la suite

PowerBi partie 1 : Mise en place

16 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #PowerBi

PowerBi partie 1 : Mise en place

Bonjour, je vais mettre en ligne une série d'articles sur PowerBi. Dans un premier temps ces articles seront à destination des débutants PowerBi avec le passage en revue des bases : importation des données, nettoyage des données, mise en forme des données dans des rapports, création de dashboard, ....

Qu'est ce que PowerBi :

''Microsoft Power BI est un ensemble de services et de fonctionnalités en ligne qui vous permettent de rechercher et de visualiser des données, de partager des découvertes et de collaborer en utilisant de nouvelles méthodes intuitives''

source Microsoft

Connexion à la plateforme PowerBi

Pour commencer nous allons nous connecter sur le site PowerBi : ici

Cliquez sur connexion en haut à droite. Si vous avez un compte microsoft, connectez-vous avec, sinon créez en un gratuitement (les comptes gratuits MS vous donne accès à une version limité mais, déjà largement suffisante pour commencer).

Vous arrivez alors sur l’interface de base de PowerBi online. Vous pouvez déjà télécharger la version desktop pour gagner du temps (je vais vous expliquer ensuite la différence entre online et desktop). Le téléchargement ce fait via l’icône de téléchargement en haut sur la droite de la fenêtre.

PowerBi partie 1 : Mise en place

PowerBi online ou PowerBi desktop ?

Ces deux versions ne doivent pas être vues comme un choix à faire car elles sont complémentaires. Voici le descriptif simplifié des deux versions.

Desktop

Cette version va s’utiliser comme vous utiliseriez Word, Excel, … en local sur votre ordinateur. Elle vous permet de créer vos rapports (import de données, nettoyage des données, mise en page des données au travers de graphiques et de cartes, …).

Retenez que c’est la version à utiliser pour créer les rapports.

Online

Cette version va vous permettre de mettre en ligne vos rapports et dashboards. Vous pourrez modifier les rapports directement dessus mais en cas d’actualisation depuis la version desktop, ces modifications seront écrasées.

Retenez que cette version sert surtout à publier vos rapports et dashboards.

Importer les données

Je vous invite à lire la partie 2 dans laquelle nous allons importer des données et les nettoyer.

Partie 2 ici

Lire la suite

Metafizzy : utilisation dans un projet Asp.net MVC

9 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #Asp.net

Metafizzy : utilisation dans un projet Asp.net MVC

Bonjour,

je vais vous présenter la librairie Metafizzy qui va nous permettre d'afficher des listes triables.

Dans un premier temps allez sur Metafizzy.

ensuite cliquez sur isotope.

Metafizzy : utilisation dans un projet Asp.net MVC

Cliquez droit sur le bouton "Download isotope.​pkgd.​min.jsDownload" puis, "enregistrer la cible du lien sous...".

Metafizzy : utilisation dans un projet Asp.net MVC

Ce fichier js sera à ajouter aux scripts de votre solution.

 

Passons au code :

Dans un premier temps nous allons ajouter le menu qui comporte les boutons de tri.

<ul> <!-- Les class servent à utiliser bootstrap et le data-filter permet par la suite de definir les objets à afficher via une sorte d'id de catégorie --> <li><button class="btn btn-default" data-filter="*">Tous les objets</button></li> <li><button class="btn btn-default" data-filter=".categorie1">objets catégorie 1</button></li> <li><button class="btn btn-default" data-filter=".categorie2">objets catégorie 2</button></li> </ul>

Ensuite nous allons créer les objets à afficher (photos, block de texte, ...).

<!-- cette div va etres la ref. d'affichage des objets --> <div class="table"> <!-- je met en col-md-4 pour avoir 3 objets par ligne A vous de choisir le nombre d'articles par ligne. le "categorie1" est l'identifiant qui va permettre de trier les objets --> <div class="element-item col-md-4 categorie1"> <h3>Objet 1</h3> <p>Mon txt objet 1</p> </div> <div class="element-item col-md-4 categorie1"> <h3>Objet 2</h3> <p>Mon txt objet 2</p> </div> <div class="element-item col-md-4 categorie2"> <h3>Objet 3</h3> <p>Mon txt objet 3</p> </div> <div class="element-item col-md-4 categorie2"> <h3>Objet 4</h3> <p>Mon txt objet 4</p> </div> </div>

Quand nous cliquerons sur le bouton avec l'identifiant "categorie2", seul les objets 3 et 4 seront visibles.

Enfin passons au script :

<script type="text/javascript"> // on recupere le conteneur table var $table = $('.table').isotope({ // options }); // filter items on button click $('.filter-button-group').on('click', 'button', function () { var filtreSelect = $(this).attr('data-filter'); $table.isotope({ filter: filtreSelect }); }); </script>

A vous maintenant d'ajuster le css pour avoir quelque chose de propre et adapté à vos besoins.

Bonne journée et bon code =)

Lire la suite

Evénement : Global Azure Bootcamp 2016 Lyon : IoT, Open Source et Cloud Azure

2 Mars 2016 , Rédigé par Antoine SEJALON Publié dans #Lyon, #mug lyon, #evenement, #Communauté

A venir tres prochainement, le Global azure bootcamp se tiendra à la Manufacture des tabacs (université Jean Moulin Lyon III) le 16 Avril 2016 de 8h30 à 16h30.

Tres gros événement qui regroupera dans les 10 000 participants (136 villes dans 56 pays).

''Plus de 12 experts de renom venus des 4 coins de France et de Suisse réaliseront 3 tracks en parralèles pour contenter les Décideurs, les Architects ou Novices, dans un lieu somptueux.''

 

Lien : Meetup GAB Lyon 2016

Evénement : Global Azure Bootcamp 2016 Lyon : IoT, Open Source et Cloud Azure
Lire la suite