DMRI Placement - November/December 2017


Post Date: 29/12/2017

As seeing as my blog posts were getting done later in the month, which was making the 30 days of a month spread over 2, and that we finished on the 22nd December for Christmas, I?ll put November & December together. Then hopefully I can start getting these posts done at the end of each month of the new year. Anyway onto my activities.

I?ll be splitting this month into two as I finally got a new computer which meant I could start working on our bespoke platforms. The Data Platform, The Competition Platform and a new site for social influencers - MWoosh. One half will be about my work on the comp platform and MWoosh and the other half, the websites.

I?ll start with the websites. As of the time of writing this (Jan 2018), there is a new law coming into effect in May regarding data processing called GDPR. One thing we have to ensure on our websites is that users are allowed to delete their account, but with the size of database it?s not really feasible to simply delete a row of the database so what we decided to do was make all the fields NULL except email. Keeping email is necessary so we can use it make sure we don?t want to contact them again, otherwise if we null all the fields there is a chance we could end to up contacting them even after they?ve chosen to delete their account. Programming wise, this was quite simple, just a straightforward SQL update query.

The second thing on the websites I did was yet another ad. These ads are what we starting to referring to them as were ?Poll Ads?. They?re from a company called Apester and they basically just ask you questions (questions related to the site) and you can see how you stack up against other people who all took part. Yet again, quite a simple programming, literally just stick and script tag on the site.

The first task I had on the platforms was on MWoosh and it was to create a page to view the tickets. Nothing complicated was needed, so I just did a simple table with each row containing the name, email of the person who sent the ticket and a preview of the message. I then added a couple of buttons, one to view the ticket in more detail and other to set the ticket as resolved. We build our platforms using the PHP framework Laravel and while I had learnt the basics it still felt quite new to me so this was a nice little task to get my mind into the door of Laravel. In terms of the back end everything that needed to be done to get this page how I wanted was things that I had done before: get/request data from the database and AJAX. (The page didn?t necessarily need AJAX, but I really like doing it and having the page function without the need of refreshing is a lot more of smooth experience for the user).

Obviously, this didn?t take that long and after this was completed I was given my first proper project to do and it was for the Competition Platform. The comp platform allowed users to create competition but that was about it, what we wanted was some sort of the page the users could access that will allow them to see stats and info about their competition. The stats we wanted to display were (initially): competition entries, age distribution (age of people who entered the comp), gender distribution and data capture (data capture is a question the comp creator can add on to the comp to ask users if they want to hear more about the company the comp is advertising). And finally, it would allow the user to download a PDF containing all this information. Now getting these stats wasn?t going to be a problem, the challenge came in getting them into graph form? So this was starting to look quite the fun little programming challenge I?ve been waiting for. What I first started doing was creating a preview of the competition, this was something that was already implemented so it was a simple copy and pasting job this. The next step was going to be a challenge - the charts. I first wanted to see if I could get the data I need for the charts from the database and in the correct format. For example, I could easily get competition entries, but getting entries per day the competition had been live was not as simple. However, much to my surprise, my first round of Google searches to try to solve this problem was successful, one line of SQL was all I needed. The rest of the data did just require simple SQL, the gender of the users who entered and their age (which would be put into an age range e.g 18-24 etc).
Now the charts, I decided to create the charts using JavaScript in as after looking at my options this would be the best choice. The framework I chose was Chart.js, after looking at how it works and create some charts with static data, I worked out all I had to was make an AJAX call to back-end and plug in the data from those SQL queries. When first doing this I did have some problems with data not showing on the charts and I learned the AJAX and the chart loading was getting called asynchronously. My initial fix was to disable async on the AJAX, but this is clearly bad practice as I was basically taking the A out AJAX? After an embarrassing amount of time, I realised I could just put the creation of the charts within the AJAX success function and this fixed those problems with the data not displaying on the charts.
The next thing to do was get the number of entries per region in the UK (our competitions are only UK based). Wanted I wanted to do was have a marker in each UK region (e.g Yorkshire, North East, Midlands etc?) and when hovering the mouse over the maker and pop up will appear displaying the number of entries for that region. To achieve this I would have to use the Google Maps API, I had used the API before so I was quite comfortable getting stuck in. The most challenging part of this would be getting the region of the user?s who have entered, we store the postcode of the user?s address so I would use that get the region.
The final part of the project was the PDF, the contents of this PDF will basically be what you see on the webpage. Seeing as this was the case I tried out some plugins that would convert the HTML straight to PDF but this didn?t really look good. After trying out multiple plugins, I decided to use jsPDF. Even though it wasn?t the most efficient at creating the PDF, I was able to put everything I wanted on the PDF. The inefficiency mentioned above was because I had to specify each component of PDF - graphs, stats, comp info etc, all had to be placed on the PDF by specifying the ?coordinates?. As a result, and after constant re-design of the PDF, it was a very long and arduous task to create it. But I did manage to something that looks decent enough, I even managed to make it in a way so that you could easily add components and everything below that would be moved accordingly.