Comment créer un formulaire de réservation pour votre application Web avec Kendo UI
J'espère que vous suivez ma série sur l'utilisation des composants de Kendo UI car une occasion fantastique vient de nous permettre de créer une nouvelle application Web importante. .
Le conseil spatial intergalactique a récemment mis des trous de ver à la disposition des voyages spatiaux.
En réaction à cette nouvelle, toute une industrie a été créée. De nombreuses nouvelles compagnies aériennes et hôtels ont été créés pour fournir des voyages aux confins de l’univers. Cherchant à tirer parti de cette opportunité, l'équipe de Progress souhaite créer un site de voyage afin que tout le monde puisse rechercher et réserver des voyages en ligne. Si vous acceptez, votre mission est de créer un formulaire de réservation permettant aux clients de rechercher des hôtels dans l’espace. Le formulaire devra permettre aux utilisateurs de rechercher des destinations, d'entrer leurs dates d'arrivée et de départ, de sélectionner le nombre d'invités et de soumettre le formulaire.
Recherche de destinations
Pour la recherche fonctionnalité, nous avons besoin d’un champ de texte pour permettre aux utilisateurs de saisir des données. Nous souhaitons également leur fournir des suggestions quand ils commencent à taper. Nous allons utiliser le composant AutoComplete pour cette fonctionnalité. Nous aurions pu également utiliser la liste DropDownList . Comme nous n’avons à présent que quelques destinations parmi lesquelles choisir, nous pouvons afficher toutes les options à l’utilisateur. Mais à l'avenir, nous savons que nous ajouterons beaucoup plus d'hôtels et de transporteurs de navette spatiale appartenant à des centaines de galaxies. Par conséquent, un AutoComplete est notre meilleure option car nous attendons de nos utilisateurs qu'ils sachent ce qu'ils doivent entrer, mais nous pouvons toujours les forcer à sélectionner une option dans notre liste prédéfinie.
Il s'agit du code standard. avec la barre de recherche mise en œuvre:
L'Intergalactic
]
» title= »booking02″/>
Choix des dates
Ensuite, les utilisateurs devront sélectionner leurs dates d'arrivée et de départ. Nous ne voulons pas que l'utilisateur tape la date car nous ne croyons pas qu'ils l'entreront correctement. Nous pourrions définir le format de l'entrée. Mais notre formulaire sera utilisé par des personnes de toute la planète Terre. Des cultures différentes auront des attentes différentes en ce qui concerne le formatage des dates et nous ne voulons forcer personne à connaître une norme. Par conséquent, nous utiliserons un composant DatePicker . Le DatePicker nous fournit un calendrier sur lequel les utilisateurs peuvent cliquer pour sélectionner la date. Voici le balisage qui sera ajouté à la fin du formulaire:
Le chèque dans Le Check in le contrôle dans DatePicker doit être initialisé avec la date d'aujourd'hui. L’utilisateur ne peut pas non plus sélectionner une date antérieure, nous allons donc définir la date minimale pour l’enregistrement sur la date du jour. Voici le code pour initialiser notre sélecteur de date d’enregistrement:
$ ('# checkin'). KendoDatePicker ({ valeur: new Date (), min: new Date () }) ;
var checkin = $ ('# checkin'). Data ('kendoDatePicker');;
La valeur par défaut pour la vérification sera un jour après l'enregistrement, car l'utilisateur doit réserver au moins une nuit. rester. Et la date minimale de départ est le lendemain de l’enregistrement. Pour calculer la date de départ, nous utiliserons une fonction d’aide qui renvoie la valeur du sélecteur de date d’arrivée plus un jour. Nous avons maintenant ce code associé au sélecteur de date de départ:
var checkout = $ ('# checkout'). Data ('kendoDatePicker');
fonction getCheckout () { var aujourd'hui = Date.parse (checkin.value ()); retour nouvelle date (aujourd'hui + 86400000); }
Il reste un autre problème à considérer. Si l'utilisateur modifie la date d'arrivée, la date de départ ne change pas automatiquement. Il serait possible de sélectionner une date d'arrivée postérieure à la date de départ. Nous devons corriger cela afin que la valeur minimale du sélecteur de date de départ soit au moins un jour de plus que le sélecteur de date d'arrivée. Pour implémenter cela, nous allons ajouter un gestionnaire d'événements de changement à notre sélecteur de date d'arrivée pour définir les valeurs et min du sélecteur de date de départ. Il s'agit du sélecteur de date d'enregistrement mis à jour:
$ ('# checkin'). KendoDatePicker ({ valeur: nouveau Date (), min: nouveau Date (), modification: fonction ( ) { var checkinTime = Date.parse (checkin.value ()); var checkoutTime = Date.parse (checkout.value ()); si (checkinTime> checkoutTime) { var newCheckoutTime = new Date (checkinTime + 86400000); checkout.value (newCheckoutTime); checkout.min (newCheckoutTime); } } });
Sélection du nombre d'invités
Pour sélectionner le nombre d'invités, nous allons utiliser le composant DropDownList . Les utilisateurs ne pourront choisir qu'un nombre de un à cinq. C'est juste assez d'options pour que nous puissions les placer dans un menu déroulant. Une ComboBox n’est pas nécessaire car nous ne souhaitons pas que l’utilisateur entre des valeurs autres que celles que nous avons définies. Pour cette même raison, une NumericTextBox ne répond pas non plus à nos besoins. Nous pouvons également utiliser une liste déroulante pour permettre aux utilisateurs de choisir le nombre de chambres ou de nuits qu’ils réservent. Voici le balisage de la liste déroulante de sélection d'invités:
Nous allons garder ce composant simple et personnaliser uniquement l'aspect de l'élément sélectionné. Cela nécessite de définir le paramètre valueTemplate du composant. Nous pourrions également personnaliser le modèle pour chaque élément de la liste déroulante et un modèle d'en-tête et de pied de page. Voici le code d'initialisation de notre liste déroulante:
Enfin, nous aurons besoin d'un bouton pour soumettre nos données de formulaire.
$ ('# btn-submit'). KendoButton ({ cliquez sur function (e) { e. preventDefault (); } });
Voici le projet final:
L'Intergalactique
[1945920]
Découvrez le
[1965904] 4]
Résumé
Nous avons utilisé un Nous avons utilisé un Nous avons utilisé un AutoComplete pour rechercher des destinations, un DatePicker pour choisir les dates, un DropDownList pour sélectionner le nombre de nuits et un Button pour soumettre notre formulaire. . Nous sommes sur la bonne voie pour publier notre site de voyages intergalactiques.
Nous pouvons toutefois faire davantage si nous voulons vraiment impressionner le patron. Nous pourrions afficher le nombre de nuits sélectionnées sur le formulaire. Nous pourrions même ajouter un ComboBox pour permettre aux utilisateurs de saisir le nombre de nuits et de mettre à jour la date de départ en fonction de la valeur sélectionnée. Sans oublier, nous devons faire quelque chose avec le formulaire une fois que le bouton est cliqué. Le gestionnaire de clic du bouton doit obtenir les valeurs de chaque champ et envoyer les données dans une demande. La prochaine étape serait de créer une page affichant les résultats. Mais cette tâche sera sauvegardée pour un autre jour.
Essayez par vous-même
Vous souhaitez commencer à tirer parti des composants de l'interface de Kendo pour créer un formulaire de réservation ou une autre fonctionnalité de votre application Web? Découvrez plus de 70 composants Kendo UI prêts à l'emploi, tels que Grid ou Scheduler. Vous pouvez commencer un essai gratuit de Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.
» title= »booking02″/>
