Uw startup opbouwen gebruik maken van Bootstrap, Ajax en jQuery

Wat je gaat creëren

Deze zelfstudie maakt deel uit van de Bouw je Startup met PHP-serie op Envato Tuts +. In deze serie begeleid ik je door het opstarten van een startup van concept naar realiteit met behulp van mijn Meeting Planner app als een realistisch voorbeeld. Elke stap die ik doe, zal ik de Meeting Planner-code vrijgeven als open-source voorbeelden waar je van kunt leren. Ik zal ook opstartgerelateerde zakelijke problemen aanpakken zodra deze zich voordoen.

Gebruikmaken van Bootstrap, Ajax en jQuery

Door onze opstartserie zijn Meeting Planner en Simple Planner ongelooflijk uitgebreid geëvolueerd. Onlangs heb ik geprobeerd me af te stemmen op gedetailleerde gebieden om het gebruik van de service te maken om vergaderingen nog eenvoudiger in te plannen.

Als je je recente aflevering Building Your Startup: Dynamic Ajax Forms for Scheduling (Envato Tuts +) nog weet, weet je hoe nuttig Ajax en jQuery kunnen zijn voor bruikbaarheid. Plannen interactief maken met Ajax heeft de bruikbaarheid van de site veranderd.

Vervolgens wilde ik één pijnpunt verbeteren dat ik tegengekomen ben toen ik de service gebruikte. Eerlijk gezegd was het tijdrovend om uitnodigingen te versturen om meerdere opties voor datums en tijden aan te bevelen. Elke keer als ik een uitnodiging voor een vergadering stuurde voor mijn eigen startup, moest ik handmatig twee of drie datum / tijd-opties maken - en het was een beetje vervelend.

In de aflevering van vandaag ga ik je laten zien hoe ik het eenvoudig maakte om een vergadering met verschillende gerelateerde datums en tijden in één stap te plannen. Ik zal in het bijzonder beschrijven hoe ik Bootstrap, Ajax en jQuery heb gebruikt om het probleem van het kiezen van datums en tijden op te lossen.

Bootstrap maakte het gemakkelijk om de functie voor desktop, tablet en mobiele apparaten te ontwerpen, en Ajax en jQuery maakten het snel en interactief.

Als je Meeting Planner of Simple Planner nog niet hebt uitgeprobeerd, ga je gang en plan je eerste vergadering. Zoek naar het onderwerp van deze tutorial terwijl je de opties voor datum en tijd kiest.

Ik neem wel deel aan de opmerkingen hieronder, dus vertel me wat je denkt! Je kunt me ook bereiken op Twitter @lookahead_io. Ik ben vooral geïnteresseerd als u nieuwe functies of onderwerpen voor toekomstige zelfstudies wilt voorstellen.

Ter herinnering: alle code voor Meeting Planner is geschreven in het Yii2 Framework voor PHP. Als je meer wilt weten over Yii2, bekijk dan onze parallelle serie Programming With Yii2.

De oplossing ontwerpen

Met behulp van Meeting Planner wilde ik regelmatig een manier hebben om een reeks datums en tijden op een rij te maken, zoals de volgende drie dagen om 8:30 uur of de volgende drie weken op woensdag om 19:00 uur. Het maakt het eenvoudiger om met mensen in te plannen wanneer u meerdere opties heeft voor wanneer u elkaar gaat ontmoeten.

Terwijl ik me verdiepte in het dieper polijsten van de gebruikersinterface, had ik eindelijk mijn eigen tijd om me op dit probleem te concentreren. Voordat ik een code schreef, besloot ik om losjes te schetsen boven wat ik wilde.

Ik besloot om een herhalingsaantal te maken, zoals de volgende drie of vijf, en een herhalingseenheid, zoals uren, dagen of weken.

Met andere woorden, laten we zeggen dat ik de editoriale droid-assistent Tom McFarlin uitnodig voor koffie en de volgende drie ochtenden wil aanbieden, dan kies ik twee en dagen herhalen na de door mij gekozen dag.

Keeping It Simple

Ik wilde niet dat mensen altijd geconfronteerd werden met een complexe vorm om een afspraak te plannen, dus ik scheidde de functie voor het herhalen van de datumtijd met een geavanceerde opties link hieronder weergegeven. Als u op deze link tikt of klikt, wordt het onderstaande formulier geopend:

Aan de slag met het schrijven van code

Om het formulier te ontwerpen voor zowel desktop- als mobiele apparaten, heb ik Bootstrap gebruikt. In wezen heb ik meerdere rijen gemaakt voor het formulier met verschillende kolombreedten die samenvouwen op mobiel. Laten we kijken.

De meeste HTML-magie gebeurt hier in /frontend/views/meeting-time/_form.php. Ten eerste, hier is de rij met de Datum, Tijd, Looptijd en geavanceerde opties link:

    MiscHelpers :: getUrlPrefix () 'id' => 'url_prefix']); ?> 'Tz_dynamic']); ?> 'Tz_current']); ?>    $ model, 'attribute' => 'start', 'template' => 'input button', // 'taal' => 'en', 'size' => 'ms', 'clientOptions' = > ['autoclose' => true, 'format' => 'M d, yyyy', 'todayBtn' => true, // 'pickerPosition' => 'bottom-left', 'startView' => 2, 'minView '=> 2, // doen - drie dagen vooruit formatteren' initialDate '=> Datum (' Ym-d ', tijd () + 3600 * 72),]]);?>
  
     $ model, 'attribute' => 'start_time', 'template' => 'input button', // 'language' => 'en', 'size' => 'ms', 'clientOptions' = > ['autoclose' => true, 'format' => 'H: ii p', 'todayBtn' => false, 'minuteStep' => 15, 'showMeridian' => true, // 'pickerPosition' => ' linksonder ',' startView '=> 1,' minView '=> 0,' maxView '=> 1, // te doen - één dag vooruit formatteren //' initialDate '=> Datum (' Ym-d ') , // $ ("th.switch") .text ("Kies de tijd"); ]]);?> 
  
  '1 uur', 2 => '2 uur', 3 => '3 uur', 4 => '4 uur', 5 => '5 uur', 6 => '6 uur', 12 => '12 uren ', 24 =>' 24 uur ', 48 =>' 48 uur ', 72 =>' 72 uur ']; echo $ form-> field ($ model, 'duration', ['options' => ['id' => 'duration', 'class' => 'duration-width']]) -> dropDownList ($ durationList, // Platte array ('id' => 'label') ['prompt' => 'selecteer een duur'] // opties); ?> 
  'ToggleTimeAdvanced ();']);?>

Door op deze manier succesvolle kolomdimensies in Bootstrap te gebruiken, spreidt de rij zich uit op het bureaublad (hieronder weergegeven) en vouwt zichzelf op in drie rijen op mobiel (hierboven weergegeven):

 ...  ...  ...  ...

De jQuery toggleTimeAdvanced () voor de geavanceerde opties link opent het herhalingsformulier door de verborgen klasse:

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

Notitie: Alle jQuery is te vinden in /frontend/web/js/meeting.js.

Het reset ook de herhalingsinstelling naar nul wanneer u deze sluit - dat was een ontwerpbeslissing om te voorkomen dat duplicaten zouden worden gemaakt als mensen het geavanceerde formulier zouden sluiten.

Hier is de timeAdvanced subvorm:

  'niet herhalen', 1 => '1 extra optie', 2 => '2 extra opties', 3 => '3 extra opties', 4 => '4 extra opties', 5 => '5 extra opties'] ; echo $ form-> field ($ model, 'repeat_quantity', ['options' => ['id' => 'repeat_quantity', 'class' => 'repeat-width']]) -> label ('Toevoegen' ) -> dropDownList ($ repeat_quantity, ['options' => ['1' => ['Selected' => true]]]); ?> 
  'opeenvolgend uur, b.v. 9 uur, 10 uur en 11 uur ',' dag '=>' opeenvolgende dag, b.v. Maandag, dinsdag & woensdag ',' week '=>' opeenvolgende week, b.v. volgende vrijdag en vrijdag na ']; echo $ form-> field ($ model, 'repeat_unit', ['options' => ['id' => 'repeat_unit', 'class' => 'repeat-width']]) -> label ('Op elk ') -> dropDownList ($ repeat_unit); ?>

De gebruikte Bootstrap verschijnt in één rij op desktops en twee rijen op mobiele apparaten:

Hier is hoe het lijkt op toevoegen 3 extra opties elke volgende dag om 9 uur:

Vervolgens heb ik de Voeg tijd toe() functie om het te vangen en in te dienen repeat_quantity en repeat_unit velden naar de PHP-gebaseerde controller:

functie addTime (id) start_tijd = $ ('# vergadertijd-start_tijd'). val (); start = $ ('# meetingtime-start'). val (); duration = $ ('# meetingtime-duration'). val (); repeat_quantity = $ ('# meetingtime-repeat_quantity'). val (); repeat_unit = $ ('# meetingtime-repeat_unit'). val (); if (start_tijd == "|| start ==") displayAlert ('timeMessage', 'timeMsg2'); return false;  // ajax submit subject and message $ .ajax (url: $ ('# url_prefix'). val () + '/ meeting-time / add', data: id: id, start_tijd: encodeURIComponent (start_tijd), start: encodeURIComponent (start), duur: encodeURIComponent (duur), repeat_quantity: encodeURIComponent (repeat_quantity), repeat_unit: encodeURIComponent (repeat_unit), success: function (data) loadTimeChoices (id); insertTime (id); displayAlert (' timeMessage ',' timeMsg1 '); return true;);

Startups zijn moeilijk omdat je altijd haast hebt om nieuwe functies te krijgen. Iemand (waarschijnlijk omdat ik de enige codeur ben) had de gekozen duur nooit overgedragen; dus ik heb dat ook toegevoegd. Tot vandaag waren alle vergaderingen 1 uur, ondanks de vraag van de gebruikers. Genoeg gezegd. #startuplife.

Vervolgens schakelde ik over naar de MVC-code in mijn Yii Framework-based /frontend/controllers/MeetingTimeController.php. Hieronder ziet u de actionAdd AJAX-methode die reageert op de jQuery-verzending:

openbare functie actionAdd ($ id, $ start, $ start_time, $ duration = 1, $ repeat_quantity = 0, $ repeat_unit = 'hour') Yii :: $ app-> response-> format = \ yii \ web \ Reactie: : FORMAT_JSON; $ timezone = MiscHelpers :: fetchUserTimezone (Yii :: $ app-> user-> getId ()); date_default_timezone_set ($ tijdzone); $ Cnt = 0; terwijl ($ cnt<=$repeat_quantity)  $model = new MeetingTime(); $model->start = urldecode ($ start); $ model-> start_time = urldecode ($ start_time); if (leeg ($ model-> start)) $ model-> start = Datum ('M d, Y', tijd () + 3 * 24 * 3600);  $ model-> tz_current = $ timezone; $ model-> duur = $ duur; $ model-> meeting_id = $ id; $ model-> suggest_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;  // converteer datum tijd naar timestamp $ 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); breken; case 'day': $ model-> start + = ($ cnt * 24 * 3600); breken; case 'week': $ model-> start + = ($ cnt * 7 * 24 * 3600); breken;  $ model-> einde = $ model-> start + (3600 * $ model-> duur); $ Model-> save (); $ Cnt + = 1;  return true;

Eigenlijk heb ik een lus gemaakt met behulp van een teller, $ cnt, om de begin- en eindtijdkeuze van MeetingTime te verhogen met de $ repeat_unit, bijv. uren, dagen of weken:

if ($ cnt> 0) switch ($ repeat_unit) case 'hour': $ model-> start + = ($ cnt * 3600); breken; case 'day': $ model-> start + = ($ cnt * 24 * 3600); breken; case 'week': $ model-> start + = ($ cnt * 7 * 24 * 3600); breken;  $ model-> einde = $ model-> start + (3600 * $ model-> duur);

Dus hier zijn de resultaten van het toevoegen van drie extra tijdsloten elke dag om 9.00 uur:

Het is nu dus gemakkelijker om vergaderingen met mensen te plannen en ze verschillende opeenvolgende datums en tijden aan te bieden als opties om samen te komen.

In Closing

Ik hoop dat dit behulpzaam was om te zien hoe Bootstrap kan worden gebruikt om betere vormen te creëren en kan worden gecombineerd met Ajax en jQuery om een eenvoudige interactieve ervaring voor uw gebruikers te bouwen.

Als je dit niet eerder hebt gedaan, probeer dan een vergadering in de vergaderingsplanner te plannen met de opties voor de datum en tijd en laat me weten wat je ervan vindt.

Heb je je eigen gedachten? Ideeën? Feedback? Je kunt me altijd rechtstreeks op Twitter @lookahead_io bereiken. Kijk hier voor komende tutorials in de Building Your Startup With PHP-serie.

De komende weken ga ik door met het oppoetsen van de gebruikerservaring om de service zo eenvoudig mogelijk te maken. U ziet bijvoorbeeld dat de vergadernotities nu op hun eigen tabblad staan:

En om de verwarring te elimineren die mensen hadden tussen de beschikbaarheidskolom van ja / nee schakelaars en de tweede kolom van het kiezen van de laatste plaats, ik scheidde dit in een lager sub-paneel van knoppen, Finalize the Time. Alleen organisatoren en deelnemers die als organisator zijn aangewezen, zien dit onderste deel van het scherm en vereenvoudigen het algemene beeld voor typische deelnemers:

Bootstrap, jQuery en Ajax hebben zich ook geheel of gedeeltelijk verbonden aan het bouwen van beide functies.

Ik hoop dat je in de serie nu al je eigen opstartideeën hebt en nadenkt over het schrijven van een code. Blijf op de hoogte om meer te leren over hoe ik de mijne bouw en start.

Gerelateerde Links

Simple Planner of Meeting Planner
Bouw je Startup: Dynamische Ajax-formulieren voor planning (Envato Tuts +)
De Wefunder-pagina van Meeting Planner

Code