Tools:

  • PHP
  • HTML5
  • CSS
  • jQuery
  • JavaScript

 

Building out the web application was one of the most challenging parts of my project. Since first year I’ve been learning and practicing how to prototype my designs to a high, working fidelity. However, I set myself the challenge of creating an almost launchable project, and as a result this final prototype would have to be technically functional to the highest degree. It would just have to work.

To bring my designs to life I needed to greatly upskill my rudimental knowledge of PHP and heavily draw on my HTML, CSS and JavaScript skills. I had been using these during previous prototypes (Moriarty Levels, Moriarty Print, Watson React, MK2 dashboard) which helped to refresh them and remind me of PHP functionality. However bringing different elements together into a harmonious system was a pretty daunting task, and at some stages I even thought I had met my match. I had never developed a full system before, so rather than taking the time to get to know a framework, I decided to write the entire application in vanilla PHP.

This development sprint took roughly two and a half weeks and partly overlapped with the design sprint.

Rather than try to write about the entire 5000 lines of code which make up the application I’m just going to briefly explain the core structure and how three key components work.


Core structure:

Screen Shot 2016-04-30 at 18.30.08

Rather than adopting a model, view, controller (MVC) architectural pattern which many PHP frameworks use, to ease an already steep learning curve, I opted instead to use a directory based structure – creating directories when required and passing variables by writing a ‘variables.php’ file to that directory which would be included in the ‘index.php’ for this directory. Though this not be the most efficient way to write a web application, it would work to bring my concept into a fully working fidelity.

Screen Shot 2016-04-30 at 18.51.54

Each index.php file ‘PHP includes’ a config.php, nav.php and footer.php script which keeps visual and configuration continuity across the application.

Screen Shot 2016-04-30 at 18.37.31

The header is the same throughout the web application changing only to display:

  • the page name after ~yougra.ph in a drop down menu
  • the account phone number if the user is logged in.
  • log in / log out depending on whether the PHP $_SESSION[‘user_id’] variable is set.

The white box in the middle is where page content is displayed. The design is intended to reflect the pragmatism of a scientific/clinical style printout.

What is contained in this white box is defined by the index.php script in each directory, each taking the variables in the directory, connecting to the database and rendering a page view accordingly.

While this core structure worked for a relatively straightforward web app like ~yougra.ph, it’s made me realise how important a MVC framework is to create a fully scaleable web application. While still being able to create something which works to a full fidelity, I’ve essentially learned the hard way the importance of using MVC for real, launchable digital web applications.


The Week View:

Screen Shot 2016-04-30 at 19.47.39

The top of the week view page

My system design required individual week pages to have URLs which could be shared as easily as a youtube video or instagram link. This was a direct recommendation from one of my users who wanted a single use page which she could share with her close friends/family to give them a snapshot of how she was getting on. This idea also fits in with the ‘making mental health tangible’ theme of my project.

To do this, each week would need to have a unique, generated identification string assigned to it and then placed in a directory names with this string. I used an open source library called Hashids to achieve this. Including Hashids into my project integrated a PHP class which allowed me to pass a set of variables to it (in this case the unique user ID and the automatically incrementing week index). It then returns a unique alphabetic string (eg, ywbFz, 6wTP, arTx) which can be used as a week_ID and form the directory URL.

When loading a week view (eg, yougra.ph/ywbFz), the index.php script reads the week_ID value from the variables.php file, connects to the database and renders:

  • The dates for the week
  • The graphs for each day of the week.
    • The y axis is time in 15 minute intervals
    • The x axis is magnitude of disruption in thinking (measured using a combination of anger, fear and sadness)

If the $_SESSION[‘user_id’] (logged in phone number) matches the phone number that the week belongs to, on click, it shows the thoughtcard (modal window containing the text input of the entries).

A thoughtCard

A thoughtCard

Thoughtcards can be navigated using ‘next’ and ‘previous’ buttons and escaped by clicking outside the focused element (a standard UX pattern).


The Graph

I did some early experiments in February with using HTML5 canvas and Javascript to draw seismograph style graphs in web browsers (check these out here). It worked really well and gave a good indication of the spikes in emotional disruption. However for later prototypes I used centred text with line breaks to create a similar style of graph. I investigated both again when designing the final iteration of the graphs for the web application but due to the three values (anger, fear and sadness) I was using, after experimentation I decided it made more visual sense to use the centred text approach. The three values combine together to create a disruption scale which still visually indicates the varying presence of anger, fear and sadness values.

To render these graphs, the PHP script cycles through the day in 15 minute windows checking if there is a thought entry in this window. If it finds one, it gets the anger, fear and sadness values for it and assigns them them to a counting variable for this window. A for loop for each emotion counts to this value, ‘echo’ing (the PHP construct for outputting to the rendered html document) a corresponding graph character each time.

Screen Shot 2016-04-30 at 22.20.37

Rendering the sadness portion of a disruption

The result is this:

Screen Shot 2016-04-30 at 22.28.40

The graph gives an overview of the disruptions while allowing for identification of an emphasis on one emotion as well as recognition of patterns when used for comparison.


The Printout:

The counselling service told me they often try to avoid using screens in the support environment and instead opt for paper based reference material.

As a result, my web application would have to generate print outs to be used in these support scenarios.

This print out would need the same information contained in the one week view, however it would need to be formatted for an A4 page and have the graphs on the first sheet with logged personal thoughts on the following pages.

I managed to do this through media queries – a CSS module which allows for specialist page styling depending on the media. This includes a print output.

Screen Shot 2016-04-30 at 20.02.54

 

 

Screen Shot 2016-04-30 at 22.41.35

This was the first time I had used media queries for print output and it worked really well. With a little mm precise tweaking of css positioning and resizing, it was possible to fit all the day graphs for one week onto a single page.

 

To append the individual thought entries only on the print outs, the PHP script outputs them into a div with a special ‘.onlyPrint’ class at the bottom of the page.

In the CSS this class has the display:none property, but in the @media print query, it has display:block. This acts to only display them on the print out – for the screen based interactions, individual thoughts can be accessed in thoughtCards.

 


I had hoped to publish the source code to GitHub to allow others to explore how it was made, however, due to the live database connection, for security reasons, I was unable to.

Despite this, the creation of a fully functioning web application is a huge achievement to me and has been one of the highlights of this year’s learning development.