Designing the System - Zend

I’ll go through each module, section by section, to point out the requirements for each section and the overall flow of the user’s experience to get you ready to create the application. Again there are three main sections: Accounts, Artists, and Web Services. I’ll also use a good number of activity flow diagrams to illustrate how each system is intended to work, as well as a system diagram to give you an overall look of the application before I dive into the details.

An Overall Look

Before I move into the details of the application, let’s take a step back and get an overall picture of how each section interacts with one another and how the database and web services are incorporated into the application.

An Overall Look

The starting point is the user icon, located in the top-left corner. The user has two options at this point: either sign up or log in to an account that was previously created. In the sign-up process, the user activates the existing account; in the login process, the user is directed to a profile page, in which the user’s data is fetched, along with a favorite artists list to display on the user profile page.

Lists of links are also available to the user from this page: links to remove artists, add artists, and view all artists on the list. To view all the artists on the list, the user can click the artist’s name and visit the artist profile page, which pulls data from the Web Services module. The Web Services module then consumes data from four external sources to display on the artist profile page.

Designing the Accounts Module

Let’s first look at the Accounts module because this is where a user starts when interacting with the application.

Signing Up

The sign-up page allows the user to sign up for an account in a very straightforward way. The page contains three form input fields and two check boxes to allow the user to receive e-mail newsletters about specific artists:

  • E-mail field (required)
  • Password field (required)
  • Username field (required)
  • Receive weekly artist newsletter check box
  • Receive weekly artist newsletter as HTML check box

Take a look at Figure; I’ll use it to explain what’s going on with the sign-up form.

Signing Up

Arriving at the form, the user clicks the submit button. The application then checks whether the username and e-mail address are already in the system. If either test fails, the user is shown an error and must try to sign up again.

Each input field also validates the type of input that is entered. The e-mail address has to be valid in the e-mail field, and the entered text must be between 4 and 20 characters long in both the password and username fields. Once the user successfully signs up, two e-mail messages are sent. The first e-mail is sent to the user to activate the account. After the user activates the account, the user receives a welcome e-mail message.

Logging In and Out

Login and logout functionality is standard across many sites, so it’s no surprise that this aspect of the application is covered here. The login and logout functionality of Zend Framework does not have anything special to it; it just does what it’s intended to do: log users in and out of the system.

In terms of the login process, there are a few things we want to do when the user logs into the system; for instance, we want to fetch and store any data that will be used throughout the site. Let’s go through that process to get a clear understanding.

Logging In and Out

When the user logs into the system, the system checks whether the user has activated the account. If so, the system will see whether the username and password combination is correct. If there are no errors, the process of fetching a few details from our database begins. The following user information is retrieved from the database:

  • UserID
  • Username

These two items are requested upon a successful login and stored within the user’s session. The application can then fetch user preferences throughout the site based on the user ID or username stored in the session instead of requesting the username or user ID on every page to personalize the site. After the information is received, the user is redirected to a profile page.

The logout process is much easier, so I didn’t create a user activity diagram for it. The logout functionality will simply allow the user to click on a logout link. Once the logout page is loaded, all session information will be cleared. That’s it.

User Profile Page

After successfully logging in, the user is redirected to the user profile page, which is where a user can access additional links to update the profile and artist information, and is also where users have direct access to other users’ information. It contains the username and avatar, a list of favorite artists, and an additional link to the complete list that links to the artists’ profile page. This page plays a critical part in the application because it is where the user controls preferences for the application.

Let’s take a look at the overall layout of this page because there are more links here to other sections of the site than in other pages.

User Profile Page

The user profile page acts as the springboard for the rest of the site. It contains links to the edit page and the artist edit page, and contains a set of relevant modules.

User Update Page

The user update page is where users can modify everything they have entered into the system. Let’s take a look at Figure and go through the process of updating the user information.

User Update Page

When the user arrives at the user update page, the information presented is retrieved by using the userId stored in the user’s session. If the user does not contain the required session information, the user is sent to the login page; otherwise, the userId from the session is used to retrieve the data in the database. The data on the form is presented, and the user is allowed to edit it. The user will have the option to update the e-mail address, password, and username.

When the form is submitted, the same error checks applied on the sign-up form are applied here as well to determine whether the form has any errors. If errors are found, the user can make corrections; otherwise, the data is saved in the database, and a success message is displayed.

Designing the Artists Module

The Artists module contains the functionality for the user to add artists to (and remove artists from) the list, designate which artists should be placed into a favorite artists list, and add new artists into the system. It also contains an artist profile page that has information gathered by the Web Services module.

Add Artist to User’s List

The add artist section enables a user to add an artist to the overall list from existing artists in the system, designate an artist as a member of a favorite artists list, and save the artist into the system if it does not currently exist.This shows how to add an artist, so I’ll refer to it while describing this process.

Add Artist to User’s List

The add artist link takes the user to the form with the following input fields:

  • Artist name (required)
  • Genre (required)
  • Add to favorite artists (optional)

The Genre field is a pre-populated drop-down menu containing a list of genres in the database, and the Add To Favorite Artists check box allows the user to mark the artist as a favorite artist among all others in the list.

When the user begins to type the artist name, an asynchronous search for artists matching the text currently in the artist name field is performed. If there are any matching results, the user sees a drop-down menu to select the artist. If the artist is not yet in the system, the user fills in the name of the artist and selects the genre. Before submitting the form, the user has the option to add the artist to the favorite artists list by selecting the Add To Favorite Artists check box. This will save the information into the database and link the user to the artist. After the user has completed the process of adding an artist, the user is taken to a thank you page.

Removing an Artist from the List

I remember when “Ice Ice Baby” by Vanilla Ice was the it song of the century, but nobody is currently bopping to it. So we will allow users to also remove artists from their list because users’ tastes constantly change. You’ll create a page containing a list of all artists the user has added to the list, with the option to remove the artist from the list and not completely from the system. If the user decides to remove an artist from the list, it is also removed from the favorite artists list.

Removing an Artist from the List

After clicking the remove artist link, the user is taken to the remove artist page. The database is queried to fetch all the user’s artists, the artists are presented on the page, and the user can click the check boxes on the side of the artists’ names to remove one or more artists at a time. When the user finishes selecting the artists to remove, the user clicks the Remove Artist button. If there are no artists selected to remove, an error displays and prompts the user to try again. If the user has selected any artists, they are removed from the list, and a thank you page displays.

Update Artist List

Users also need a page to add an artist currently in their list to their favorite artists list. What’s the difference? The difference between an artist on the list and an artist on a user’s favorite artists list allows you to determine which artist the user likes better. It’s like saying, “I listen to U2 and I think U2 is a good artist to listen to, but I would pay hard cash to see Paul Oakenfold live, buy all his CDs, and maybe buy other things with his name on it.” In the application, the artist on the favorite artists list is shown on the user profile page, and the user will receive e-mail about these artists on a weekly basis (depending on the user’s settings).

This shows the complete activity diagram of a user updating an artist list. It starts with the user clicking the update artists list link. The application then retrieves all the artists in the user’s artist list and displays each artist on the page, along with an Add To Favorite Artists check box to the right of the artist name. The user then has the option to select one or many artists to add to the favorite artists list.

After the user submits the form, you check to see whether the user selected any artists; if the user selected at least one artist, the artist’s status is updated, and a thank you page displays. Otherwise, the user can either select an artist or cancel the process by leaving the page.

Update Artist List

Artist Profile Page

The artist profile page, which is the brains of it all, contains information for each artist in the form of news, general information, YouTube videos, Flickr images, concert schedules, and items the user can purchase from Amazon.

When users arrive at their own profile pages or at other users’ pages, they can access the artist profile pages by clicking one of the artists in the artists list.When the artist profile page loads, a number of web services are called. Let’s review each web service.

First is the Flickr web service, which retrieves any images containing the name of the artist. When the user arrives at the artist’s profile page, the artist name is passed into the Zend_Service_Flickr, which then uses REST to fetch any images with the name of the artist. If the service locates any images with the artist name as a tag, the images are retrieved, and the images display on the page; otherwise, an apology message displays. The activity diagram can be seen below.

Artist Profile Page

The next web service implemented on the artist profile page is the YouTube service, which finds and displays relevant videos containing the artist’s name as a tag. Referring to Figure, the artist name for the profile page is retrieved, it is passed into the Zend_Gdata_YouTube service, and Zend Framework uses REST to fetch any videos relevant to the artist. Like the web service call to Zend_Service_Flickr, an apology message displays instead of the videos if there are no results.

Activity diagram YouTube web service integration

You can also integrate the web service to find any blogs that deal with the artist. Like the previous two web services, you use a tag-based search to locate matching entries containing the artist name as a tag. I won’t show an activity diagram for this web service because there is no change except for the service name.

Do you remember when your artist used to be a simple garage artist trying to push those $.25 stickers, $1 demo tapes, and $5 t-shirts? We all have to make money somehow, so no artist profile page is complete without a section to buy CDs, books, and other artist-related merchandise. So we’ll integrate a little bit of the entrepreneurial spirit into this section by integrating the Amazon application programming interface (API) into the application by using the Zend_Service_Amazon library to search and display merchandise related to the artist. Again, just like the Flickr and the YouTube activity diagrams, there is only a small change to the diagram: replacing Zend_Service_Flickr with Zend_Service_Amazon.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Zend Topics