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.
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.
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.
Each index.php file ‘PHP includes’ a config.php, nav.php and footer.php script which keeps visual and configuration continuity across the application.
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:
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).
Thoughtcards can be navigated using ‘next’ and ‘previous’ buttons and escaped by clicking outside the focused element (a standard UX pattern).
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.
The result is this:
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 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.
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.