blog

Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery

This tutorial is part of the Building Your Startup With PHP series on Envato Tuts+. In this series, I'm guiding you through launching a startup from concept to reality using my Meeting Planner app as a real-life example. Every step along the way, I'll release the Meeting Planner code as open-source examples you can learn from. I'll also address startup-related business issues as they arise.

Next, I wanted to improve one pain point that I've run into using the service. Frankly, it's been time-consuming when sending out invitations to suggest multiple options for dates and times. Every time I send a meeting invitation for my own startup, I had to manually create two or three date/time options—and it was kind of annoying.

In today's episode, I'm going to guide you through how I made it simple to schedule a meeting with several related dates and times in a single step. Specifically, I'll describe how I used Bootstrap, Ajax and jQuery to solve the problem of choosing dates and times.

Bootstrap made it easy to design the feature for desktop, tablet and mobile devices, and Ajax and jQuery made it fast and interactive.

I do participate in the comment threads below, so tell me what you think! You can also reach me on Twitter @lookahead_io. I'm especially interested if you want to suggest new features or topics for future tutorials.

As a reminder, all of the code for Meeting Planner is written in the Yii2 Framework for PHP. If you'd like to learn more about Yii2, check out our parallel series Programming With Yii2.

Designing the Solution

Using Meeting Planner over time, I'd regularly wanted a way to create a series of dates and times in a row, like the next three days at 8:30 am or the next three weeks on Wednesday at 7 pm. It just makes it easier to schedule with people when you have multiple options for when you're going to meet.

As I delved into deeper polishing of the user interface, I finally had my own time to focus on this issue. Before I wrote any code, I decided to loosely sketch above what I wanted.

I decided to create a repeat quantity, such as the next three or five, and a repeat unit, such as hours, days, or weeks.

In other words, let's say I'm inviting the editorial droid assistant Tom McFarlin to coffee and want to offer any of the next three mornings, then I choose two and days to repeat after my chosen day.

Keeping It Simple

I didn't want people to always be confronted with a complex form just to schedule a meeting, so I separated the date time repetition feature with an advanced options link shown below. Touching or clicking this link opens the form shown below:

Getting Started Writing Code

To design the form to work with both desktop and mobile devices, I leveraged Bootstrap. Essentially, I created multiple rows for the form with various column widths that collapse on mobile. Let's look.

Most of the HTML magic happens here, in /frontend/views/meeting-time/_form.php. First, here's the row with the Date, Time, Duration and advanced options link:

Startups are hard in that you're always rushing to get new features done. For example, someone (likely me since I'm the only coder) had never transferred the chosen duration; so, I added that too. Up until today, all the meetings were 1 hour despite what users requested. Enough said. #startuplife.

Then, I switched over to the MVC code in my Yii Framework-based /frontend/controllers/MeetingTimeController.php. Below, you can see the actionAdd AJAX method that responds to the jQuery submission:

Over the next few weeks, I'm going to continue polishing the user experience to make the service as easy as possible to use. For example, you might notice the meeting notes are now on their own tab:

And, to eliminate the confusion people were having between the availability column of yes/no switches and the second column of choosing the final place, I separated this into a lower sub-panel of buttons, Finalize the Time. Only organizers and participants designated as organizers see this lower panel, simplifying the common view for typical participants:

Bootstrap, jQuery and Ajax tied partly or wholly into building both of these features as well.

I hope by now in the series, you're having your own startup ideas and thinking about writing some code. Stay tuned to learn more about how I'm building and launching mine.