Table des matières:
- Étape 1: Configuration de votre propre copie
- Étape 2: présentation du formulaire Google
- Étape 3: Google Scripts: (Server Code.gs) Regardez d'abord les données et le code
- Étape 4: Activer OnFormSubmit
- Étape 5: Configuration de l'interface utilisateur
- Étape 7: Projet terminé
- Étape 8: Étape 1: le code back-end (Server Code.gs)
- Étape 9: Étape 2: la partie 2 du code back-end (Server Calls.gs)
- Étape 10: Étape 3: le code HTML (Application.html)
- Étape 11: Étape 4: le code JavaScript (JS.html)
- Étape 12: Étape 5: les actions de clic sur le code JavaScript (JS.html)
- Étape 13: La fin….enfin
Vidéo: Organisateur de garde-robe : 13 étapes
2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07
Que ce soit pour acheter des vêtements ou qu'on vous demande toujours d'emprunter un article, il y a des moments où vous souhaiteriez pouvoir jeter un coup d'œil dans votre placard de n'importe où pour voir si vous avez quelque chose de similaire. L'organisateur de garde-robe fait exactement cela ET PLUS !
Il s'agit d'un guichet unique et est vaste pour de nombreuses autres fins. My Wardrobe Organizer est une combinaison de Google Sheets en tant que base de données SQL, de Google Scripts pour la gestion des données et de Google WebApp pour un portail en ligne vers ces données. L'utilisateur final peut voir tous les articles, filtrer pour quelque chose de spécifique, marquer les articles comme prêtés, gérer leur linge et empêcher maman de vous acheter la même chemise pour Noël chaque année*.
(*Aucune garantie. Les mères achèteront ce qu'elles veulent, que vous en ayez besoin ou non)
En jetant un coup d'œil rapide à la conception du site Web dans l'image ci-dessus, on peut reconnaître une mise en page familière. L'organisateur de garde-robe est configuré comme n'importe quel site Web de vêtements ordinaire. Divisé par départements en haut et filtres fournis sur le côté, cette interface apporte une familiarité avec les fonctionnalités à l'utilisateur occasionnel. ET il est simple à utiliser.
Étape 1: Configuration de votre propre copie
Commençons par créer votre propre copie de ce projet.
Google Drive
Cliquez sur le lien ci-dessus pour accéder à ma version actuelle de cette application.
Vous verrez 3 éléments dans ce dossier: un formulaire Google, une feuille Google et un dossier.
Faites un clic droit sur la feuille Google et cliquez sur Faire une copie.
Définissez l'emplacement de cette copie sur votre propre lecteur.
Après avoir copié ce document, le formulaire Google sera automatiquement généré dans le même dossier que vous avez déplacé la feuille Google.
Pour créer le dossier (cela est nécessaire pour collecter les téléchargements des images de l'article), cliquez sur le formulaire Google copié et une invite apparaîtra vous demandant de restaurer l'emplacement du dossier pour les téléchargements.
Vous avez maintenant une copie de ce document pour travailler par vous-même !
Étape 2: présentation du formulaire Google
Maintenant que vous avez votre propre version de cette application, jetons un coup d'œil.
Votre formulaire Google est configuré pour accepter de nombreux types d'articles différents. Cependant, les chemises, les pantalons, les robes et les chaussures ont tous des limites de taille différentes. Par conséquent, une section différente de ce formulaire sera remplie en fonction du département sous lequel vous déposez votre article. Dans mon modèle (de l'article masculin), j'ai créé 5 catégories de tailles différentes. (Pour les articles sur les femmes, cliquez ici, il y en a beaucoup d'autres).
Sous chaque section de dimensionnement, j'ai établi un titre unique pour chaque paramètre que je collecterai. Nous ne voulons pas avoir plusieurs colonnes dans notre base de données avec le nom "Taille" ou nous ne serions pas en mesure de déterminer à quel type de vêtements cette taille s'applique.
A la fin de chaque section, l'utilisateur est dirigé vers la dernière partie de ce formulaire: Emplacement. J'ai personnellement choisi d'ajouter Emplacement pour déterminer les articles chez le pressing, dans la blanchisserie, à leur place ou les articles dans lesquels j'ai laissé un ami emprunter. Cela me permet d'être organisé et de ne jamais avoir l'impression de manquer un vêtement quelque part.
Comme je l'ai mentionné depuis le début, ce projet peut être étendu d'un million de façons différentes. Vous pouvez l'utiliser pour l'inventaire, un outil d'organisation plus précis, ou pour le strict emprunt de vêtements. Les champs et les sections que vous pouvez ajouter sont infinis, alors ne vous sentez pas limité à ce qui se trouve dans mon formulaire. (Pour les articles sur les femmes cliquez ici)
Avant de télécharger quelques-uns de vos propres éléments, passons à l'étape suivante pour garantir une soumission correcte.
Étape 3: Google Scripts: (Server Code.gs) Regardez d'abord les données et le code
En cliquant sur le document Google Sheets, vous verrez de nombreuses colonnes de données (et quelques lignes, laissées pour la démonstration). Lors de la soumission du formulaire, certaines sections sont ignorées, comme le montrent les données manquantes dans certaines colonnes. Mais des colonnes supplémentaires telles que ID, Emplacement par défaut, Qui et Mis à jour ont été ajoutées pour mieux suivre les modifications de ces éléments.
Un champ ID a été créé lorsque vous avez soumis le formulaire pour permettre un identifiant unique lors de la traversée de cette base de données. Pour créer ce champ, nous allons jeter un œil à l'éditeur de script en cliquant sur Outils>Éditeur de script.
Avec l'éditeur de script ouvert, vous remarquerez 8 documents dans la barre latérale de cette nouvelle fenêtre. Ces documents aident à contrôler le processus back-end, les affichages frontaux et les fonctionnalités front-end. Nous allons sauter dans chacun d'eux (si vous restez dans les parages), mais cliquez maintenant sur Server Code.
Dans le fichier Server Code.gs, il y a de nombreuses fonctions:
onSubmit(e), onOpen(), doGet(), include(fileName), openApplication(), openLaundryApp(), changeValueOnSubmit(e), setIDOnSubmit(e)
onSubmit(e) - Cette fonction sera configurée comme la première fonction à s'exécuter lors de la soumission d'un formulaire Google. Vous pouvez placer d'autres fonctions à l'intérieur de cette fonction pour permettre à de nombreux processus différents de se produire.
onOpen (e) - Cette fonction est appelée lorsque Google Sheets est ouvert. Il remplit une nouvelle option de menu pour permettre un accès rapide aux liens et aux vues de l'application.
doGet() - Cette fonction est appelée lors de l'appel d'adresse de l'application Web. Lorsqu'un utilisateur accède à l'application Web publiée, ce code indiquera à cette page ce qu'elle doit afficher. Dans ce cas, il s'agit du document Application.html.
include(fileName) - Cette fonction est utilisée à l'intérieur des pages HTML pour lire d'autres documents et insérer leur contenu dans un format HTML approprié dans une autre page. Nous l'utilisons pour nos fichiers CSS.html et JS.html.
openApplication() et openLaundryApp() - Ces fonctions contiennent le code à exécuter lorsqu'un utilisateur clique sur les boutons de menu ajoutés à la barre d'outils Google Sheet.
changeValueOnSubmit(e) et setIDOnSubmit(e)- Ce sont les fonctions que nous examinerons pour le moment. Ils sont chargés de mettre à jour certains champs avec des valeurs par défaut lors de la soumission initiale du formulaire.
Étape 4: Activer OnFormSubmit
Ces deux fonctions, changeValueOnSubmit(e) et setIDOnSubmit(e), doivent être connectées à l'action de l'utilisateur consistant à soumettre un formulaire. Pour ce faire, nous devons activer un déclencheur.
Nous activons le déclencheur en cliquant sur Modifier > Déclencheurs du projet actuel. Cela ouvre le Google Developer Hub.
Dans le coin inférieur droit du tableau de bord des déclencheurs se trouve un bouton Ajouter un déclencheur. Cliquez ici.
Nous allons maintenant configurer la fonction à exécuter lorsqu'un formulaire est soumis. Dans notre cas, j'ai plusieurs fonctions (changeValueOnSubmit(e) et setIDOnSubmit(e)) que je mets à l'intérieur d'une fonction onSubmit() donc je n'ai qu'à configurer 1 déclencheur. Par conséquent, nous sélectionnerons onSubmit() et définirons ce déclencheur pour qu'il s'exécute On form submit.
Nous avons maintenant un formulaire de travail qui remplira une feuille Google avec des identifiants uniques et définira des valeurs par défaut.
Vous pouvez désormais télécharger vos propres éléments à l'aide du formulaire Google. (Ce n'est pas nécessaire de continuer car il y a déjà des valeurs de démonstration). Nous allons maintenant plonger dans l'interface utilisateur.
Étape 5: Configuration de l'interface utilisateur
BIENVENUE! Nous avons enfin atteint la partie pour laquelle vous êtes venu, l'interface utilisateur !!!!
A première vue, il n'y a rien ici. Nous n'avons pas encore passé d'appels. Pour charger la page plus rapidement, j'ai décidé de ne pas encombrer la première page de TOUS vos éléments et de vous permettre de cliquer sur ce que vous voulez voir plus rapidement. Puisque c'est le cas, il n'y a aucun élément dans le champ de contenu principal et aucun filtre dans la barre latérale. Cliquez sur Tout pour voir ce qu'il y a dans notre base de données.
Nous avons maintenant chargé chaque élément de notre base de données dans le champ de contenu principal. Vous verrez des images, des numéros d'identification, des couleurs, des tailles et des emplacements. Le champ de localisation peut être mis à jour ici ! Si vous décidez de prêter l'article, vous pouvez sélectionner cette option, vous pouvez le placer dans votre placard, votre commode ou votre buanderie.
Et dans notre barre latérale, nous avons tous les champs possibles pour chaque vêtement dans notre nouvelle requête. Imaginez simplement avoir 20 options de tailles différentes dans cette barre latérale, cela ne serait pas très efficace, alors affinons notre recherche en cliquant sur Accessoires.
Maintenant que nous avons chargé Accessoires, jetez un œil à la barre latérale. Il s'est ajusté à seulement 3 champs, car ce sont les paramètres qui s'appliquent à chaque élément de cette requête. Je vais faire un tri par couleur. En cliquant sur couleur, une liste déroulante apparaît. Ici, je peux soit taper la couleur que je veux, puis la sélectionner, soit si je vois mon option tout de suite, je clique simplement dessus. J'ai choisi Red pour cette démonstration. Cliquez sur Appliquer le filtre au bas de cette barre latérale et le contenu principal s'actualisera en vous montrant les éléments dont la couleur Rouge est définie comme paramètre de couleur.
J'ai déjà mentionné que cette base de données m'aide à gérer mes articles en prêt et dans ma lessive. Pour rendre les choses un peu plus faciles, au lieu de cliquer manuellement sur chaque emplacement déroulant de cette page principale, j'ai créé le mode blanchisserie. Revenez à la page Google Sheet et sous App View, vous verrez Mode blanchisserie. Cette option affichera un modal plus petit qui affichera uniquement les éléments avec l'emplacement de blanchisserie. Je peux maintenant marquer tous ces éléments par défaut, ce qui les replacera dans leurs emplacements où ils sont normalement stockés.
Étape 7: Projet terminé
FÉLICITATIONS
Pour ceux d'entre vous qui souhaitent simplement une base de données fonctionnelle pour gérer leurs articles, bienvenue dans votre organisateur en ligne. Pour les esprits curieux intéressés par le code derrière cette application. Restez dans les parages pendant que je le décompose.
*Vous êtes libre de supprimer les éléments de test APRÈS avoir entré au moins un de vos propres éléments dans la base de données. (Je t'expliquerai plus tard si tu restes).
Étape 8: Étape 1: le code back-end (Server Code.gs)
Plus tôt, nous avons ouvert le fichier Server Code.gs et j'ai brièvement décrit chacune des fonctions car leur objectif était de servir chacun des éléments que vous venez de configurer, mais nous allons maintenant les décomposer en certaines fonctionnalités et utilitaires appelés pour faire de ce code un succès.
1) Parcours de table:
var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName("Réponses de formulaire 1"); var range = feuille.getRange(1, 1, feuille.getMaxRows()); var rowNum = range.getLastRow();
- Ce code est une base pour parcourir une feuille Google. J'appelle la feuille par son nom plutôt que par son numéro afin que si les feuilles sont supprimées ou réorganisées par fonction, elle puisse toujours fonctionner correctement.
- Dans ce code, je ne collecte que la plage pour toutes les données du tableau.
2) Attribution d'un identifiant:
var LastID =range.getCell(rowNum-1, 1);var CellValue = Number(LastID.getValue());var ColA = 1; var max =15; var min=5; CellValue = CellValue+ Math.round((Math.random()* (max - min) + min)); e.source.getActiveSheet().getRange(range.getLastRow(), ColA).setValue(CellValue); changeValueOnSubmit(e);
- J'ai précédemment demandé que les valeurs de démonstration soient laissées dans le tableau jusqu'à ce que l'utilisateur ait soumis au moins une valeur pour lui-même. Cela est dû au fait que le générateur d'identification automatique s'appuie sur la dernière valeur de la base de données à remplir.
- Je récupère l'avant-dernière ligne car la dernière ligne est notre nouvelle valeur et la 1ère colonne pour la valeur de l'ID.
- Je génère ensuite aléatoirement un nombre entre 5 et 15 et l'ajoute à la dernière valeur. *
- Enfin, je place cette valeur dans la colonne ID de la dernière ligne.
- Ensuite, nous appelons la fonction changeValueOnSubmit(e).
* J'ai choisi 5-15 pour permettre l'étiquetage futur et l'intégration de Google Home afin que les chiffres ne soient pas suffisamment proches pour créer une confusion sur les cintres, les étiquettes de vêtements ou les codes-barres.
3) Modification de la valeur de l'URL:
var DataChange = e.namedValues["Item Picture"];var DefaultLocation = e.namedValues["Où gardez-vous cet article ?"]; var ColD = ColumnID_("Item Picture") +1; var ColLoc = ColumnID_("Emplacement par défaut")+1;DataChange = DataChange.toString().replace("open?", "uc?export=view&"); e.source.getActiveSheet().getRange(e.range.rowStart, ColD).setValue(DataChange); e.source.getActiveSheet().getRange(e.range.rowStart, ColLoc).setValue(DefaultLocation);
- Lorsque vous soumettez une photo via un formulaire Google, l'URL insérée dans Google Sheets est un lien vers le document réel. Dans notre cas, lorsque nous créons une page HTML, nous voulons que le lien ne soit que l'image.
- En changeant le "ouvrir?" partie de l'URL vers "uc?export=view&", nous avons plutôt créé un lien vers l'image.
- Nous placerons à nouveau cette nouvelle valeur à l'emplacement du lien actuel de l'image de l'article.
- Je règle également "l'emplacement par défaut" et "l'emplacement actuel" de l'élément sur la même chose dans la base de données. Cela m'aidera lorsque j'essaierai d'utiliser mon mode blanchisserie.
-
Nous y plongerons à la page suivante, mais c'est notre premier aperçu de la fonction ColumnID_() que j'ai créée.
Cette fonction utilise les noms de colonne pour le traduire en entier de colonne, ce qui est utile pour les appels de plage qui nécessitent un numéro de colonne plutôt qu'un nom
4) SpreadsheetApp.getUI()
- Dans la deuxième image, vous pouvez voir l'utilisation de SpreadsheetApp.getUI() pour créer un ajout de menu de barre d'outils à la feuille Google.
- La fonction.getUI () permet également de créer une fenêtre contextuelle modale utilisée pour le mode blanchisserie et comme lien rapide vers l'interface du site Web.
5) Service HTML
- Il existe deux types de HTMLServices utilisés dans ce code: Template et HTMLOutput
- Le modèle permet d'insérer du code à l'intérieur du code HTML afin que les informations provenant d'un serveur puissent être renseignées lorsque la page est appelée.
- La sortie HTML affiche des pages HTML simples.
- Nous avons également la méthode include() qui nous permet de créer plusieurs fichiers HTML et de les combiner dans un fichier HTML modélisé en renvoyant le contenu du fichier dans un format HTML plutôt qu'une chaîne.
J'ai joint un document configuré comme Google App Scripts Documentation pour vous familiariser avec la façon dont le code source et les fonctionnalités sont expliqués dans Google Apps.
Étape 9: Étape 2: la partie 2 du code back-end (Server Calls.gs)
Maintenant, nous avons entré le Server Calls.gs. Ces fonctions sont principalement utilisées dans le JavaScript HTML, elles ont donc été séparées du code principalement utilisé dans le back-end qui se trouve dans Server Code.gs.
Image 1) Variables globales:
Image 2) récupération d'objets:
Image 3) fetchItemsQry
Image 4) filterItems
Image 5) fetchFiltersWithQry
Image 6) ColumnID et CacheCalls
Il y a tellement de choses à dire avec chacun d'eux. Et pour décomposer le code et expliquer ce qui se passe, j'avais besoin d'un peu plus d'espace de frappe. Ci-joint un document pour la répartition du code de ServerCalls.gs
Ce document est configuré comme la documentation Google App Scripts et fait même des liens vers des objets similaires.
Étape 10: Étape 3: le code HTML (Application.html)
Le code HTML devient très malheureux dans la boîte de dialogue d'un Instructable. Alors s'il vous plaît suivez les images ci-dessus.
1) Dans l'en-tête de la page Application.html nous établissons un titre et appelons notre page CSS.html à charger.
* Étant une page HTML modélisée, nous pouvons ajouter plus de code à ce document sans encombrer l'écran actuel en utilisant la méthode include(pageName) mentionnée précédemment trouvée dans Server Code.gs
La boîte d'en-tête principale se trouve également dans cette image. Vous pouvez modifier l'en-tête ici et saisir "[Votre nom]'s Wardrobe" ou tout autre élément sous lequel vous voudriez reconnaître cette page.
2) Juste en dessous de l'en-tête se trouve notre barre de navigation supérieure.
Cette barre de navigation comprend tous les types d'articles répertoriés sur la feuille Article à l'intérieur de nos feuilles Google.
Une fonction en ligne est appelée pour récupérer un tableau de ces éléments. Ensuite, une boucle est exécutée pour inclure chacune de ces options en tant que bouton de menu, avec un code d'action afin que lorsqu'un utilisateur clique sur le bouton de menu, les éléments respectifs apparaissent dans la zone du corps.
3) Le corps principal.
Il y a 4 portions dans cette partie. Une sortie de texte, le filtre de la barre latérale, les images du corps principal et le JS inclus.
La sortie de texte permet à l'utilisateur de voir une vue de texte rapide pour le type d'éléments qu'il examine actuellement au lieu de se référer à l'option de menu qu'il a sélectionnée.
Le filtre de la barre latérale contient les nombreux filtres disponibles pour le type d'élément qu'un utilisateur a sélectionné. Ces filtres reflètent toutes les options disponibles pour cette catégorie ainsi que le nombre d'éléments qui relèvent de cette valeur de catégorie. Cette barre latérale est remplie de code JavaScript (qui sera discuté ensuite).
Le corps principal est actuellement vide, mais tout comme les filtres, il sera rempli de boîtes d'articles détaillant l'ID, la couleur, la taille et l'emplacement de l'article avec une image incluse une fois que l'utilisateur sélectionne une catégorie et que le code JavaScript remplit cette zone.
Enfin, les includes (JS), examinons cela à l'étape suivante.
Étape 11: Étape 4: le code JavaScript (JS.html)
Si vous pensiez que le code serveur était une section lourde, apprenez-en davantage.
Ici, nous combinons notre HTML et SeverCode avec les interactions des utilisateurs. Tout élément sur lequel vous cliquez doit être traité ici pour obtenir les données appropriées et les renvoyer dans un format lisible. Jetons donc un œil à nos premiers appels:
Le script appelle: j'utilise 3 bibliothèques différentes pour ce projet; jquery, bootstrap et un module complémentaire spécial de sélection de bootstrap. Ces bibliothèques permettent le formatage des objets et des appels plus faciles aux éléments dans le code HTML.
Ma prochaine ligne importante de JavaScript est ci-dessous:
$(document).touche(function(event){ if (event.which == '13') { event.preventDefault(); } });
Ici, je désactive la touche Entrée pour ne déclencher aucun des formulaires. Comme dans ce cas, les Google Web Apps ne reçoivent qu'une seule adresse de page. Une pression d'entrée ajouterait des données à l'adresse HTML et tenterait de rediriger l'utilisateur. En désactivant cela, vous autorisez votre code JavaScript à faire tout le travail.
function removeFilters(){ google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters(); }
function updateDBlocation(id, value){ google.script.run.withSuccessHandler(allGood).withFailureHandler(FailDBUpdate).updateLocation(id, value); }
Voici deux fonctions qui appellent le fichier Server Code.gs. La ligne:
google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure). ServerRemoveFilters();
a de nombreuses parties de travail, mais le squelette est enraciné à partir de " google.script.run" qui indique à la page HTML que la fonction suivante est sur le serveur.
- Le dernier bit de ce code est la fonction à exécuter. Dans cet exemple ServerRemoveFilter()
- En ajoutant un withSuccessHandler(), la page HTML sait maintenant quoi faire avec les données renvoyées, c'est-à-dire exécuter la fonction avec la parenthèse.
- La même chose s'applique à withFailureHandler()
Maintenant que nous avons décomposé l'appel de code serveur, jetons un coup d'œil rapide à ce qui se passe lorsque ces appels de serveur réussissent et échouent.
function allGood(e){ console.log("Success on server"); } function onFailure(error){ $("#message-box").html("
Impossible de récupérer les vêtements pour le moment. ERREUR: " + message d'erreur +"
"); } function FailDBUpdate(error){ $("#message-box").html("
Vous n'avez pas accès pour modifier l'emplacement. ERREUR: " + message d'erreur +"
"); $(".location-selects").prop('disabled', 'disabled'); }
J'ai créé un journal de console très simple pour signifier le succès lorsque la fonction de localisation est exécutée que vous pouvez voir comme allGood().
Lors de la gestion des erreurs, ces deux fonctions génèrent le message d'erreur que l'utilisateur peut voir en utilisant un appel jQuery à l'objet HTML avec un ID de "message-box".
Passons maintenant au gros travail
Étape 12: Étape 5: les actions de clic sur le code JavaScript (JS.html)
La barre de menu supérieure a des options pour chaque type d'article. La fonction qu'ils exécutent au clic est:
function filterType(article, id){ $("ul.navbar-nav li.active").removeClass("active"); $("#articlecourant").html(" //CODE HTML ICI");
updateSideBar = true;
google.script.run.withSuccessHandler(updateItems).withFailureHandler(onFailure).fetchItems("Articles", article); var newSelect = "#type-"+id; $(newSelect).addClass("actif"); $("#myNavbar").removeClass("in"); }
Nous pouvons voir dans ce code que nous avons un google.script.run qui appelle le serveur pour récupérer des informations. La fonction de réussite de cet appel est updateItems().
IMAGE 1 (avec le code HTML lourd dans cette fonction, il est difficile de copier strictement le code, sans apparaître un désordre dans cette boîte)
Dans le code updateItems(), il se passe beaucoup de choses. Encore une fois, nous devons parcourir l'objet qui nous a été renvoyé et ajouter chaque élément à notre page de corps principale.
Le code HTML est ajouté sous forme de tableaux pour décomposer le code et le rendre plus facile à lire et à voir où itemData est inséré.
Dans la boucle de chaque élément, je supprime les champs que je ne veux pas voir dans la description, tels que Par défaut, horodatage et URL de l'image. Je supprime l'URL de l'image de la description car elle est plutôt ajoutée en tant que href à une balise. Une fois ces informations assemblées, elles sont envoyées au corps principal à l'aide de la fonction jQuery.append().
Une fois que tous les éléments ont été ajoutés à la page, cette requête d'éléments est à nouveau envoyée au code serveur pour trier et renvoyer les options de filtrage, comme indiqué sur l'image 2.
IMAGE 2 (mise à jour de la barre latérale)
Très similaire à la fonction updateItems(), nous avons à nouveau des tableaux de code HTML et une boucle pour toutes les options de filtrage. Le seul changement notable est le jQuery.selectpicker('refresh'). Cette fonction provient de la bibliothèque de scripts que nous avons incluse dans la dernière étape. Il permet au programmeur d'écrire un simple HTML sélectionné et de laisser la bibliothèque le mettre à jour pour inclure une fonction de recherche ainsi que le code CSS.
IMAGE 3 (filtrage avec la barre latérale)
Enfin, nous avons la fonction updateFilter(formData). Ceci est utilisé lorsqu'un formulaire est soumis à partir de la barre latérale. On commence par utiliser une fonction jQuery.serializeArray() qui lit le code HTML de l'élément défini dans notre cas un formulaire, et renvoie les valeurs dans une chaîne à envoyer au serveur. Et nous recommençons le processus à partir de l'image 1.
Étape 13: La fin….enfin
Bien, tu l'as maintenant; une explication complète et approfondie pour vous aider à créer votre propre garde-robe en ligne ou à utiliser les fonctionnalités créées dans mes scripts Google pour développer votre propre projet.
Cela a été un voyage de codage de ce projet (et de documentation à travers ce Instructable) mais j'ai apprécié le processus et j'espère que vous apprécierez le produit. J'aimerais avoir des nouvelles de tous ceux qui font des ajustements comme Michael Jordan dit "Le plafond est le toit" et je suis d'accord que cette application n'a pas de limites.
Conseillé:
Station de recharge en carton et organisateur : 5 étapes
Station de charge en carton Dock et organisateur : cette station de charge cache les fils tout en chargeant plusieurs appareils d'une manière qui vous permet de voir l'écran d'affichage de votre appareil. Cela rend la pièce moins désordonnée et encombrée parce que tous ces fils emmêlés n'ont pas l'air bien. Remarque : tous les mo
Tableau organisateur bon marché, double face, style Grid-it : 4 étapes
Tableau organisateur de style Grid-it bon marché, double face: il s'agit d'une version simple et bon marché des organisateurs de grille plus polis, solides et généralement meilleurs que vous pouvez acheter. J'ai coûté la fabrication d'une construction similaire à l'original et j'ai décidé que cela n'en valait pas la peine, mais cette version ne coûte précisément rien (
Organisateur de feuille de reliure personnalisée pour cartes à collectionner ou petites pièces : 7 étapes
Organisateur de feuille de classeur personnalisé pour cartes à collectionner ou petites pièces : j'ai cherché une meilleure technique de stockage pour mes composants électroniques car jusqu'à présent j'ai utilisé un organisateur de boîte pour organiser mes résistances et petits condensateurs mais ceux-ci n'ont pas assez de cellules pour stocker chaque valeur dans une cellule différente donc j'ai eu un peu de va
Organisateur de sac à dos pour appareil photo : 3 étapes
Organisateur de sac à dos pour appareil photo : dans ce Instructable, je montre comment utiliser un vieux tapis de puzzle de yoga afin de créer un organisateur pour votre équipement photo qui s'intègre dans n'importe quel sac à dos que vous avez. Même vous pouvez l'utiliser pour ranger votre équipement en toute sécurité. L'idée est simple et peut être modifiée pour s'adapter à di
Organisateur de résistance : 3 étapes (avec photos)
Organisateur de résistance : Bonjour mes chers amis ! :) Lorsque je fabriquais des appareils électroniques, des prototypes sur une maquette et que j'avais besoin de connecter des résistances, j'avais toujours du mal à chercher la bonne pour moi. J'avais une grosse boîte laide avec toutes les résistances dedans. Une