Construire votre démarrage tirer parti de Bootstrap, Ajax et jQuery

Ce que vous allez créer

Ce tutoriel fait partie de la Construire votre démarrage avec la série PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d’une startup du concept à la réalité en utilisant mes Planificateur de réunion application comme exemple de la vie réelle. À chaque étape du processus, je publierai le code de Meeting Planner sous forme d’exemples open source à partir desquels vous pourrez apprendre. Je traiterai également les problèmes liés au démarrage au fur et à mesure qu'ils surviennent.

Tirer parti de Bootstrap, Ajax et jQuery

Grâce à notre série de startups, Meeting Planner et Simple Planner ont considérablement évolué. Récemment, j’ai essayé d’affiner des zones détaillées pour que le service de planification de réunions soit encore plus facile..

Si vous vous souvenez de notre récent épisode, Building Your Startup: Formulaires Ajax dynamiques pour la planification (Envato Tuts +), vous savez à quel point Ajax et jQuery peuvent être utiles à la convivialité. Rendre la programmation interactive avec Ajax a transformé la convivialité du site.

Ensuite, je voulais améliorer un point de douleur que j'ai rencontré en utilisant le service. Franchement, l'envoi d'invitations demande beaucoup de temps et d'options. Chaque fois que j'envoyais une invitation à une réunion pour mon propre démarrage, je devais créer manuellement deux ou trois options de date / heure, et c'était assez ennuyant..

Dans l'épisode d'aujourd'hui, je vais vous expliquer comment simplifier la planification d'une réunion avec plusieurs dates et heures associées en une seule étape. Plus précisément, je vais décrire comment j'ai utilisé Bootstrap, Ajax et jQuery pour résoudre le problème du choix des dates et des heures..

Bootstrap facilite la conception de la fonctionnalité pour les ordinateurs de bureau, les tablettes et les appareils mobiles, tandis qu'Ajax et jQuery la rendent rapide et interactive.

Si vous n'avez pas encore essayé Meeting Planner ou Simple Planner, planifiez votre première réunion. Recherchez le sujet de ce didacticiel lorsque vous choisissez vos options de date et d’heure..

Je participe aux commentaires ci-dessous, alors dites-moi ce que vous en pensez! Vous pouvez également me joindre sur Twitter @lookahead_io. Je suis particulièrement intéressé si vous souhaitez suggérer de nouvelles fonctionnalités ou de nouveaux sujets pour de futurs tutoriels..

Pour rappel, tout le code pour Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez notre série parallèle Programmer avec Yii2.

Concevoir la solution

Au fil du temps, avec Meeting Planner, je recherchais régulièrement un moyen de créer une série de dates et d’heures consécutives, comme les trois prochains jours à 8 h 30 ou les trois semaines mercredi à 19 heures. Cela facilite simplement la planification avec les gens lorsque vous avez plusieurs options pour les réunions..

En approfondissant le polissage de l'interface utilisateur, j'ai enfin eu le temps de me consacrer à ce problème. Avant d’écrire un code, j’ai décidé d’esquisser plus haut ce que je voulais..

J'ai décidé de créer une quantité répétée, telle que les trois ou cinq prochaines, et une unité répétée, telle que des heures, des jours ou des semaines..

En d'autres termes, supposons que j'invite l'assistant du rédacteur, Tom McFarlin, à prendre un café et que je veuille offrir l'un des trois prochains matins. deux et journées à répéter après mon jour choisi.

Garder les choses simples

Je ne voulais pas que les gens soient toujours confrontés à un formulaire complexe uniquement pour planifier une réunion. Je séparai donc la fonction de répétition de l'heure et de la date avec un options avancées lien montré ci-dessous. Toucher ou cliquer sur ce lien ouvre le formulaire ci-dessous:

Commencer à écrire un code

Pour concevoir le formulaire afin qu'il fonctionne à la fois avec des périphériques de bureau et des périphériques mobiles, j'ai utilisé Bootstrap. Essentiellement, j'ai créé plusieurs lignes pour le formulaire avec différentes largeurs de colonne qui se réduisent sur mobile. Regardons.

La plupart de la magie HTML se passe ici, dans /frontend/views/meeting- time/_form.php. D'abord, voici la rangée avec le Rendez-vous amoureux, Temps, Durée et options avancées lien:

    MiscHelpers :: getUrlPrefix (), 'id' => 'url_prefix']); ?> 'tz_dynamic']); ?> 'tz_current']); ?>    $ model, 'attribut' => 'start', 'template' => 'input button', // 'language' => 'en', 'size' => 'ms', 'clientOptions' = > ['autoclose' => true, 'format' => 'M d, yyyy', 'todayBtn' => true, // 'pickerPosition' => 'en bas à gauche', 'startView' => 2, 'minView '=> 2, // à faire - formater trois jours à l'avance' initialDate '=> Date (' Ym-d ', heure () + 3600 * 72),]]);?>
  
     $ model, 'attribut' => 'heure_début', 'template' => 'input button', // 'language' => 'en', 'size' => 'ms', 'clientOptions' = > ['autoclose' => true, 'format' => 'H: ii p', 'todayBtn' => false, 'minuteStep' => 15, 'showMeridian' => true, // 'pickerPosition' => ' en bas à gauche ',' startView '=> 1,' minView '=> 0,' maxView '=> 1, // à faire - formater un jour à l'avance //' initialDate '=> Date (' Ym-d ') , // $ ("th.switch") .text ("Choisissez l'heure"); ]]);?> 
  
  '1 heure', 2 => '2 heures', 3 => '3 heures', 4 => '4 heures', 5 => '5 heures', 6 => '6 heures', 12 => '12 heures ', 24 =>' 24 heures ', 48 =>' 48 heures ', 72 =>' 72 heures ']; echo $ form-> champ ($ model, 'duration', ['options' => ['id' => 'duration', 'class' => 'duration-width']]) -> dropDownList ($ durationList, // Flat array ('id' => 'label') ['prompt' => 'sélectionner une durée'] // options); ?> 
  'toggleTimeAdvanced ();']);?>

En utilisant des dimensions de colonne réussies dans Bootstrap comme ceci, la ligne se déploie sur le bureau (voir ci-dessous) et se replie sur elle-même en trois lignes sur le mobile (voir ci-dessus):

 …  …  …  …

Le jQuery toggleTimeAdvanced () pour le options avancées lien ouvre le formulaire de répétition en supprimant le caché classe:

 fonction toggleTimeAdvanced () if ($ ('# timeAdvanced'). hasClass ('hidden')) $ ('# timeAdvanced'). removeClass ('hidden');  else $ ('# timeAdvanced'). addClass ('hidden'); $ ("select # meetingtime-repeat_quantity"). prop ('selectedIndex', 0);

Remarque: Tous les jQuery peuvent être trouvés dans /frontend/web/js/meeting.js.

Il réinitialise également le paramètre de répétition à zéro lorsque vous le fermez. Il s'agissait d'une décision de conception visant à empêcher la création de doublons si les utilisateurs fermaient le formulaire avancé..

Ici se trouve le temps avancé sous-formulaire:

  'pas de répétition', 1 => '1 option supplémentaire', 2 => '2 options supplémentaires', 3 => '3 options supplémentaires', 4 => '4 options supplémentaires', 5 => '5 options supplémentaires'] ; echo $ form-> champ ($ model, 'repeat_quantity', ['options' => ['id' => 'repeat_quantity', 'class' => 'repeat-width']]) -> label ('Ajouter' ) -> dropDownList ($ repeat_quantity, ['options' => ['1' => ['Selected' => true]]]); ?> 
  'heure successive, par exemple 9 heures, 10 heures et 11 heures ',' jour '=>' jour successif p. Ex. Lundi, mardi et mercredi ',' semaine '=>' semaine successive, par exemple vendredi prochain et vendredi après ']; echo $ form-> champ ($ model, 'repeat_unit', ['options' => ['id' => 'repeat_unit', 'class' => 'repeat-width']])) -> label ('Sur chaque ') -> dropDownList ($ repeat_unit); ?>

Le Bootstrap que j'ai utilisé apparaît dans une rangée sur les ordinateurs de bureau et deux rangées sur les appareils mobiles:

Voici à quoi cela ressemble 3 options supplémentaires chaque jour à 9 heures:

Ensuite, j'ai mis à jour le Ajouter du temps() fonction pour capturer et soumettre le repeat_quantity et repeat_unit champs du contrôleur basé sur PHP:

fonction addTime (id) start_time = $ ('# meetingtime-start_time'). val (); start = $ ('# meetingtime-start'). val (); duration = $ ('# meetingtime-duration'). val (); repeat_quantity = $ ('# meetingtime-repeat_quantity'). val (); repeat_unit = $ ('# meetingtime-repeat_unit'). val (); if (start_time == "|| start ==") displayAlert ('timeMessage', 'timeMsg2'); retourne faux;  // ajax soumettre le sujet et le message $ .ajax (url: $ ('# url_prefix'). val () + '/ meeting-time / add', data: id: id, start_time: encodeURIComponent (start_time), start: encodeURIComponent (start), durée: encodeURIComponent (durée), repeat_quantity: encodeURIComponent (repeat_quantity), repeat_unit: encodeURIComponent (repeat_unit),, success: function (data) loadTimeChoices (id); insertTime (id); timeMessage ',' timeMsg1 '); retourne vrai;);

Les démarrages sont difficiles en ce sens que vous vous dépêchez toujours d'obtenir de nouvelles fonctionnalités. Par exemple, quelqu'un (probablement moi puisque je suis le seul codeur) n'a jamais transféré la durée choisie; alors, j'ai ajouté ça aussi. Jusqu'à aujourd'hui, toutes les réunions duraient une heure, malgré les demandes des utilisateurs. Assez dit. #startuplife.

Ensuite, je suis passé au code MVC dans mon fichier /frontend/controllers/MeetingTimeController.php basé sur la structure. Ci-dessous, vous pouvez voir le actionAjouter Méthode AJAX qui répond à la soumission jQuery:

fonction publique actionAdd ($ id, $ start, $ start_time, $ duration = 1, $ repeat_quantity = 0, $ repeat_unit = 'hour') Yii :: $ app-> réponse-> format = \ yii \ web \ Réponse: : FORMAT_JSON; $ timezone = MiscHelpers :: fetchUserTimezone (Yii :: $ app-> user-> getId ()); date_default_timezone_set ($ timezone); $ cnt = 0; while ($ cnt<=$repeat_quantity)  $model = new MeetingTime(); $model->start = urldecode ($ start); $ model-> start_time = urldecode ($ start_time); if (vide ($ modèle-> début)) $ modèle-> début = Date ('M d, Y', heure () + 3 * 24 * 3600);  $ model-> tz_current = $ timezone; $ modèle-> durée = $ durée; $ model-> meeting_id = $ id; $ model-> suggéré_by = Yii :: $ app-> user-> getId (); $ model-> status = MeetingTime :: STATUS_SUGGESTED; $ selected_time = date_parse ($ model-> start_time); if ($ selected_time ['hour'] === false) $ selected_time ['hour'] = 9; $ selected_time ['minute'] = 0;  // convertit l'heure de la date en horodatage $ model-> start = strtotime ($ model-> start) + $ selected_time ['hour'] * 3600+ $ selected_time ['minute'] * 60; if ($ cnt> 0) switch ($ repeat_unit) case 'hour': $ model-> start + = ($ cnt * 3600); Pause; cas 'jour': $ modèle-> début + = ($ cnt * 24 * 3600); Pause; cas 'semaine': $ modèle-> début + = ($ cnt * 7 * 24 * 3600); Pause;  $ modèle-> fin = $ modèle-> début + (3600 * $ modèle-> durée); $ model-> save (); $ cnt + = 1;  return true;

Fondamentalement, j'ai créé une boucle en utilisant un compteur, $ cnt, incrémenter les choix de l'heure de début et de fin de MeetingTime de la $ repeat_unit, par exemple. heures, jours ou semaines:

if ($ cnt> 0) switch ($ repeat_unit) case 'hour': $ model-> start + = ($ cnt * 3600); Pause; cas 'jour': $ modèle-> début + = ($ cnt * 24 * 3600); Pause; cas 'semaine': $ modèle-> début + = ($ cnt * 7 * 24 * 3600); Pause;  $ modèle-> fin = $ modèle-> début + (3600 * $ modèle-> durée);

Alors voici les résultats de moi en ajoutant trois créneaux horaires supplémentaires chaque jour à 9h00:

Alors maintenant, il est plus facile de planifier des réunions avec les gens et de leur proposer plusieurs dates et heures successives comme options pour se réunir.

En clôture

J'espère que cela vous a aidé à voir comment Bootstrap peut être utilisé pour créer de meilleurs formulaires et peut être combiné avec Ajax et jQuery pour créer une expérience interactive simple pour vos utilisateurs..

Si vous ne le faisiez pas auparavant, essayez de planifier une réunion dans Meeting Planner en répétant les options de date / heure et laissez-moi savoir ce que vous pensez..

Avez-vous vos propres pensées? Des idées? Retour d'information? Vous pouvez toujours me joindre directement sur Twitter @lookahead_io. Surveillez les prochains tutoriels ici dans la série Construire votre démarrage avec PHP.

Au cours des prochaines semaines, je vais continuer à perfectionner l'expérience utilisateur pour rendre le service aussi simple que possible. Par exemple, vous remarquerez peut-être que les notes de réunion sont maintenant sur leur propre onglet:

Et, pour éliminer la confusion que les gens avaient entre la colonne de disponibilité de commutateurs oui / non et la deuxième colonne de choisir l'endroit final, je l'ai séparé dans un sous-panneau inférieur de boutons, Finaliser le temps. Seuls les organisateurs et les participants désignés comme organisateurs voient ce panneau inférieur, simplifiant ainsi la vue commune des participants types:

Bootstrap, jQuery et Ajax liés en partie ou en totalité à la construction de ces deux fonctionnalités.

J'espère qu'à présent dans la série, vous avez vos propres idées de démarrage et vous songez à écrire du code. Restez à l'écoute pour en savoir plus sur la façon dont je construis et lance le mien.

Liens connexes

Planificateur simple ou planificateur de réunion
Construire votre démarrage: Formulaires Ajax dynamiques pour la planification (Envato Tuts +)
Page Wefunder de l'organisateur de réunion

Code