1. Code
  2. Yii

Building Your Startup With PHP: User Settings, Profile Images and Contact Details

This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Access Control, Active Record Relations and Slugs
Building Your Startup With PHP: Scheduling a Meeting
Final product image
What You'll Be Creating

This tutorial is part of the Building Your Startup With PHP series on 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, we'll release the Meeting Planner code as open source examples you can learn from. We'll also address startup-related business issues as they arise.

In this tutorial, we're going to build out key areas around the user's own data for broader use through the application:

  1. Contact Details: the user's phone number and video conferencing addresses for virtual meetings
  2. User Settings: to track the user's preferences within the application
  3. Profile Images: to allow the user to upload a photo which we can use on meeting pages

All of the code for Meeting Planner is written in the Yii2 Framework for PHP, which has built-in support for I18n. If you'd like to learn more about Yii2, check out our parallel series Programming With Yii2 at Tuts+.

Just a reminder, I do participate in the comment threads below. I'm especially interested if you have different approaches, additional ideas, or want to suggest topics for future tutorials.

Contact Details

The purpose of contact details is to allow users to provide phone numbers and video conference addresses for virtual meetings. The phone number is also useful pre- and post- meeting.

Building this feature is relatively straightforward. As we did in earlier tutorials, we used Yii's code generator, Gii, to build the model for UserContact and CRUD files.

We also updated the navigation bar to include a link to the User Contact feature. In frontend/views/layouts/main.php:

You can also see a link above to the User Settings feature which will be described further below.

Adding a selection dropdown for types is a common model extension we use to make forms friendlier. See the Type of Contact dropdown below:

Add Your Contact Form with Type Dropdown

Here are the model type definitions and helper methods to allow friendly dropdowns for contact type services:

Here is the dropdown implemented in the form:

These type helpers are common constructs throughout Meeting Planner.

Now, let's move on to user settings.

User Settings

As Meeting Planner grows in functionality it will be important to allow users to customize functionality with a set of preferences. We build a user settings sub-system to manage these preferences within the application.

The UserSetting table is a bit different than other models in that each user has only one record, and each record has many fields which represent a particular user's settings. This is different from when users add contact entries, where each user has many records which each represent a contact entry. 

When users modify their settings, we update their individual settings record. We can also extend the table's fields over time to support additional options.

We will need to create helper functions that load a user's settings and create a default record for them if they don't exist.

We also need to create a form to make configuring the settings an easy process. We can make use of Bootstrap's layouts and Yii2 widget extensions.

Choosing Our First User Settings

While the number of settings will increase over time, let's review a few of the ones we want to start with:

  • User profile photo (path to a file they'll upload)
  • Receiving reminders the day before a meeting
  • Receiving reminders in the days leading up to a meeting
  • Share contact details with meeting participants
  • Block all email from the system

We can create the User Setting table with an Active Record Migration and extend it with updated migrations later.

Here's the migration with fields for our settings—note the relation to the User table:

Run the migration:

Writing The Code

We can use Gii to generate the model and CRUD files for us. Of course, we'll have to modify the CRUD to display only the current user's record.

Here are the settings for the Model Generator:

Yii Code Generator Gii with Model UserSetting

Here are the settings for the CRUD controller:

Yii Gii Code Generator CRUD for User Settings

When the user clicks on Settings in the navigation bar, we want to actually display the update settings page. Let's build some helpers for checking for the user's settings record and creating it if it doesn't exist.

Here's the index redirect to the update action:

The Initialize method creates a record for the active user and sets all of the default settings:

Customizing the Settings Form

We have to replace some of the auto-generated form code to include checkboxes and another dropdown list (as we did with the UserContact Type above). I like that Yii's checkbox functionality includes the ability to specify set and unset values. Typically, web form checkboxes return an empty element (exists) for true or don't return (doesn't exist) for false.

Here's the end result:

Meeting Planner Update Your Settings

Let's go ahead and extend UserSetting to support profile photos.

Profile Images

In order to show show user photos on meeting pages, we need to support users uploading a photo (in most cases). Alternatively, at least for default, we can use the Gravatar service which associates a profile photo by the user's email address. Uploading and saving files on a server is always a detailed and delicate web development task which we'll walk through shortly.

Configuring Bootstrap Tabs

First, let's begin by adding tabs to the user settings form which will separate general settings from profile images. Using the Bootstrap nav-tab style definitions, we come up with this:

It looks like this:

User Settings with Bootstrap Tabs

By default, if there is no uploaded image, we'll try to display the user's Gravatar.

Helpful Yii2 Extensions for Profile Images

There are four Yii2 extensions I want to include for profile image support:

  1. Carsten Brandt's Gravatar to display gravatars
  2. Kartik Visweswaran File Input to support image file uploads
  3. Yii Imagine to scale images to different sizes
  4. 2Amigos Resource Manager for later support for Amazon S3 storage

Visweswaran and the 2Amigos have produced a number of Yii2 extensions that are super useful and they generally provide solid documentation as well.

So, add these extensions to your composer.json file:

And update composer:

Using Gravatar Images

If there is no profile image configured, we'll display the user's gravatar. The Gravatar service references the registered user's email address. Here's the code to display the Gravatar:

It will look something like this. If the user has configured a Gravatar, you'll see their chosen image.

Displaying a Gravatar with Yii2

Uploading a Profile Image

For uploading images, we'll use Kartik's excellent file input widget. He also offers a very nice explainer on how to use it.

Here's the code for our update form which displays the widget in the Upload Photo pane:

The top of the form includes enctype for multi-part form data:

The form looks like this:

Yii2 File Input Extension - Upload a Profile Image

We also add rules to the UserSetting model to restrict uploads to jpg, gif and png, and to limit the upload size to 100kb.

By the way, the Yii2 validators have an amazing breadth of capabilities for many common operations web developers might normally build by hand. I'll try to explore this in a future Programming With Yii2 tutorial.

Here's the code that handles the post from the update form. In general, it's probably a good idea to rework more of this code into model methods and reduce the amount of complexity in the controllers.

The images need to be stored where they can be viewed by the web server. I've created an uploads/avatar directory in the /frontend/web tree.

Scaling Images With Imagine

We actually want to store the image in three sizes: full size, one small square for displaying in the navigation bar or list views, and one medium-sized square for meeting pages.

We'll use the Yii2 Imagine extension to scale images; it extends the Imagine image manipulation library for PHP.

Here's the code that scales and saves the additional image sizes:

Here's the finished form displaying the square image on the user profile page:

Meeting Planner Update Your Settings with Tabs and Profile Image

Cleaning Up Unused Images

When users upload a new photo, we need to delete the old image and its accompanying scaled copies. We'll expand the controller to call a new delete method:

Here's the deleteImage method in UserSetting:

Using Amazon S3 to Store Images

Storing user uploaded images on our web server can create complexities. It means that in addition to backing up MySQL we need to always back up a portion of the file system as well. It can complicate server restore operations and migrations. It also puts a load on our LAMP stack whenever images are loaded. 

Using Amazon S3 separates this task from your primary web server and can improve performance and simplify server management over time, especially around portability, scalability and upgrades. I'll review uploading and accessing files from Amazon S3 in a future tutorial.

What's Next?

I hope you've learned some applied aspects of Yii, ActiveRecord, Bootstrap, forms, file upload and image manipulation. I enjoyed working with some of the new JQuery widgets available as Yii extensions. Watch for upcoming tutorials in our Building Your Startup With PHP series—there are lots of fun features coming up. In fact, we're getting closer to being able to schedule our first meeting!

Please feel free add your questions and comments below; I generally participate in the discussions. You can also reach me on Twitter @reifman or email me directly.

Related Links

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.